Exercises from basic to intermediate with VueJS

Exercises from basic to intermediate with VueJS

Ejercicios_Vue 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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/dist/vue.min.js " > </ script > 
    < script  src =" //unpkg.com/[email protected]/dist/bootstrap-vue.min.js " > </ script > 
    < script  src = " // unpkg.com/[email protected]/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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native is a framework to build cross platform native mobile apps using JavaScript. It is a wrapper around the APIs of React Native. So, with Vue Native, you can do everything that you can do with React Native. With Vue Native, you get

How to Make a Simple Vue Custom Select Component

In this article, you’ll learn how to build a Vue custom select component that can be easily be styled using your own CSS. In fact, it’s the same component that we use in production on Qvault, and you can see it in action on the playground.

Creating a Custom Tooltip Component in Vue

There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.