Basic concepts of Vue

What is the vue

Vue is a set of progressive frameworks for building user interfaces

  • Website: Cn.vuejs.org/
  • Progressive: Integrate more functions on demand;
  • Frameworks: syntax with its own set of rules, much more powerful than libraries (example: Vue);
  • Libraries: Encapsulated properties and methods (example jQuery)

Why use

  1. Fast and efficient development
  2. Market demand, enterprise development are in use
  3. Prerequisite skills and high salary for front-end engineer

@ vue/cli scaffolding

Reason for using scaffolding: WebPack is cumbersome to configure the environment itself, one by one for each package downloaded

@vue/ CLI Scaffolding introduction

@vue/ CLI is a global module package provided by VUE official (get vUE command), this package to ensure the smooth construction process and set up the work platform

1. @vue/ CLI installation

Global Installation Commands

Yarn Global add @vue/cli or NPM install -g@vue /cli

To viewvueScaffolding version

vue -V

2. @vue/ CLI Create the project startup service

Create a project

Vue create is the command vuecli-demo file/project name. Note that the file/project name cannot contain uppercase letters, Chinese characters, or special characters

vue create vuecli-demo

Select a template

You can select up and down arrows, CTRL + C if you make a mistake

Select how to download scaffolding project dependencies

Press Enter to generate the project folder + files + download the necessary third-party packages

After the command is executed, enter the following two commands in the panel to start the built-in hot update local server

cd vuecil-demo

Yarn Serveh or NPM Run serve

Success status – Green

Enter the address of local on the browser panel:http://localhost:8080, you can see the following page, indicating that @vue/ CLI scaffolding is successfully installedSummary: Vue command to create project directory, project built-in Webpack local hot update server, help us package project preview project

@vue/ CLI directory and code analysis

  • Vuecil – Demo # Project directory
  • ├── Node_modules # Third-party package to rely onCopy the code
  • ├─ public # Static File DirectoryCopy the code
  • ├─ favicon. Ico# browser mini ICONSCopy the code
  • ├ ─ index.html # Single-page HTML file (web surfing is it)Copy the code
  • ├─ SRC # Business FolderCopy the code
  • ├── Assets # Static ResourcesCopy the code
  • └─ └. PNG #Copy the code
  • ├─ ComponentsCopy the code
  • └─ helloWorld.vue # welcome page vue code fileCopy the code
  • ├─ App.vue # Root component for the whole AppCopy the code
  • ├ ── main.js #Copy the code
  • ├─.gitignore # git Submit Ignore ConfigurationCopy the code
  • ├─ ├─ Babel.config.js #Copy the code
  • ├─ Package. json #Copy the code
  • ├─ Readme.md # InstructionsCopy the code
  • └─ yarn.lock # Project pack version lock and cache address

Main documents and meanings

  1. Node_modules are downloaded third-party packages
  2. Public /index.html – The web page that the browser runs
  3. SRC /main.js – entry file packaged by Webpack
  4. SRC/app.vue — VUE project entry page
  5. Package. json – Dependency package list file

@vue/ CLI Custom configuration

‘/* Overrides the webpack configuration */

Module. exports = {devServer: {// custom service configuration open: true, // automatically open browser port: 3000}} ‘

Eslint understand

Eslint is a code checking tool. If you violate rules, you will receive an error. Set lintOnSave: false in vue.config.js to restart the server

Single vue file

  1. Vue recommends using. Vue files to develop projects
  2. There can only be one root tag in the template
  3. Vue files – separate modules – scope does not affect each other
  4. The style attribute, along with the scoped attribute, ensures that the style applies only to the current tag within the template
  5. Vue files are packaged with webpack and inserted into index.html