Morioh
Login
Liya Gebre

Liya Gebre

3 years ago

Exercises from basic to intermediate with VueJS

Vue

    -p, --preset < presetName >        skip prompts
    -d, --default use the default on creation
    -m, --packageManager < command >   Use npm or yarn
    -n, --no-git Without using git
    -b, --bare No instructions for beginners
vue create example1 -dnm yarn
vue init simple project_name
vue init webpack-simple project_name
npm install -g npm-check-updates
ncu
ncu -u
"production" : "vue-cli-service build --modern"
npx http-server ./dist/

Currency library: Accounting.js

npm i accounting
or
yarn add accounting
  • Use:
  import  accounting  from  'accounting' ; 
  accounting . formatMoney ( value )

Library for Dates: moment.js

npm i moment
or
yarn add moment

CSS Bootstrap Library

npm i bootstrap jquery popper.js
or
yarn add bootstrap jquery popper.js @ popperjs / core
  • usage in main.js or index.js
  import  'bootstrap' ;  
  import  'bootstrap / dist / css / bootstrap.min.css' ; 
  window . $  =  window . jQuery  =  require ( 'jquery' ) ;

Using Babel - plugin-syntax-dynamic-import

This dependency will allow the Lazy Loading Routes to work and implement from VueJS in conjunction with Vue-Router.

Official documentation for Vue-Router official documentation for babel: .

Dependency installation:

npm install --save-dev @ babel / plugin-syntax-dynamic-import
or
yarn add --dev @ babel / plugin-syntax-dynamic-import

Installing Vue-Router

  < script  src = "https://unpkg.com/vue-router@3.1.6/dist/vue-router.js" > < / script >
  • Installation with NPM:
npm i --save vue-router
  • Installation with Yarn:
yarn add vue-router

Installing Vuex

  < script  src = "https://unpkg.com/vuex@3.1.3/dist/vuex.js" > < / script >
  • Installation with NPM:
npm -i vuex --save
  • Installation with Yarn:
yarn add vuex
  • Use mapState, mapGetters
import  { mapState ,  mapGetters }  from  'vuex'

Installing Bootstrap-Vue

To work with bootstrap-vue it is necessary to first install bootstrap.

  • Official site: Bootstrap-Vue ,

  • Using the CDN or file download:

  < head > 
    <! - Load required Bootstrap and BootstrapVue CSS -> 
    < link  type = " text / css " rel = " stylesheet " href = " //unpkg.com/bootstrap/dist/css/bootstrap.min.css "/>
     < link  type =" text / css " rel =" stylesheet " href =" //unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css "/>
     <! - Load polyfills to support older browsers -> 
    <script  src = "//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver " crossorigin =" anonymous " > </ script > 
    <! - Load Vue followed by BootstrapVue, and BootstrapVueIcons -> 
    < script  src =" //unpkg.com/vue@latest/dist/vue.min.js " > </ script > 
    < script  src =" //unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js " > </ script > 
    < script  src = " // unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js" > </ script > 
  </ head >
  • Installation with NPM:
npm i bootstrap-vue
  • Installation with Yarn:
yarn add bootstrap-vue
  • usage in main.js or index.js
  import  'bootstrap / dist / css / bootstrap.css' ; 
  import  'bootstrap-vue / dist / bootstrap-vue.css' ;

  import  {  BootstrapVue ,  IconsPlugin  }  from  'bootstrap-vue'

  // Install BootstrapVue 
  Vue . use ( BootstrapVue ) 
  // Optionally install the BootstrapVue icon components plugin 
  Vue . use ( IconsPlugin )

Using Webpack, NodeJS and ExpressJS

node ./node_modules/webpack/bin/webpack --config ./build/webpack.config.js

Configuring and installing FireBase

To work with firebase you must have a Google account, go to the official website and create a new project, clicking start, then add project, write the name of the project and follow the steps.

  • Official site: Firebase

  • Documentation for JavaScript with Firestore. Firestore

  • Installation with NPM:

npm i firebase --save
  • Installation with Yarn:
yarn add firebase -D
  • To bring an application to Firebase Hosting, you must:
  1. Create the project in firebase
  2. Enter the hosting section
  3. Click start or get started
  4. Install via terminal firebase tool with: With NPM
  npm i firebase-tools -g
  1. With Yarn
yarn global add firebase-tools
  1. Then click continue within firebase hosting
  2. Now in the editor, within the project, you must start a firebase session with the command:, firebase loginselecting or starting the session with the gmail account where you are running firebase hosting on the web
  3. Now in the terminal, the project should be started with firebase init
  4. Then if to proceed
  5. After selecting the hosting
  6. Then select the project in which you have active hosting.
  7. Now you must write the name of the directory where the production files will be found. In this case you must enter “dist” because this will be the name of the folder that vue-cli creates for production.
  8. Indicate yes to compile in an SFC
  9. Once the firebase configuration process is finished, the production process must be started with vue-cli using the “build” command, either: With NPM
  npm run build
  1. With Yarn
yarn build
  1. Once the vue-cli production process is finished, the files in the dist folder must be sent to the firebase hosting, by means of the instruction: firebase deploy --only hosting

Applying FontAwesome

To use the FontAwesome library locally without the CDN, the dependencies must be installed:

  • Installation with NPM:
$ npm i --save @ fortawesome / fontawesome-svg-core
$ npm i --save @ fortawesome / free-solid-svg-icons
$ npm i --save @ fortawesome / vue-fontawesome
  • Installation with Yarn:
yarn add @ fortawesome / vue-fontawesome -D
yarn add @ fortawesome / free-solid-svg-icons -D
yarn add @ fortawesome / fontawesome-svg-core -D
yarn add @ fortawesome / fontawesome-free -D

import  {  library  }  from  '@ fortawesome / fontawesome-svg-core' ; 
import  {  faCheck ,  faTimes  }  from  '@ fortawesome / free-solid-svg-icons' ; 
import  {  FontAwesomeIcon  }  from  '@ fortawesome / vue-fontawesome' ;

library . add ( faCheck ) ; 
library . add ( faTimes ) ;

Vue . component ( 'font-awesome-icon' ,  FontAwesomeIcon ) ;

Installing Axios

  • Official site: Axios ,

  • Using the CDN:

  < Script  src = "https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js" > < / script > 
  ` ` 
  or 
  ` `javascript 
  < script  src = "https://unpkg.com/axios/dist/axios.min.js" > < / script > 
  `` `
  • Installation with NPM:
npm install axios --save-dev
  • Installation with Yarn:
yarn add axios -D

To use Axios, it must be imported into each component where you want to implement within the script:

import  axios  from  'axios' ;

Installing VueFire

  • Official Site: VueFire

  • Installation with NPM:

npm install vuefire firebase
  • Installation with Yarn:
yarn add vuefire firebase

What is application testing?

It is the process of submitting an application to different tests to verify that it works correctly.

Types of tests and development techniques with tests

For more information: Vue Test Utils

Unitary

A unit test or “unit test” is a type of automated test, that is, it must be able to be executed without the need for manual intervention. This test is used to verify that a specific method of the production code works correctly.

End-to-end tests

It is a methodology used to test whether the flow of an application is running as designed from start to finish.

The difference it has with unit tests is that end-to-end focuses on the system in an integral way, that is, testing it as a whole.

TDD and BDD techniques

Both techniques are aimed at creating more robust applications focused on requirements rather than on the content of the code itself.

Development guided by software tests, or Test-driven development (TDD) , is a technique that is based on a development of tests through which the code must pass, if it is well implemented, it continues to create code focused on the next test, Otherwise, it is configured until the test passes and we can go to the next phase.

Development directed by behavior or Behavior Driven Development (BDD) , as its name implies, it is not a testing technique, but rather a development strategy (as well as TDD).

While TDD focuses on the unit test, BDD instead, focuses on the highest level test, the functional test, the acceptance test, the focus is on complying with the business and not just with the code.

Assertions

An assertion is a Boolean expression at a specific point in a program that will be true unless there is an error in the program.

Mocks

Or “Mock objects” are substitutes for objects or system components, used in replacement during testing. Its main function is to validate that certain methods are called on the objects that they are imitating

Stubs

A surrogate function, method, or code snippet, which simulates specific behavior within an object to facilitate testing

Download Details:

Author: JuanDuran85

Source Code: https://github.com/JuanDuran85/Ejercicios_Vue

#vue #vuejs #javascript

Exercises from basic to intermediate with VueJS
16.25 GEEK