Vue CLI is a complete system for rapid development based on vue.js called scaffolding tools.

Features:

  1. Unify the architectural style of the project.

  2. Initialize the configuration of project dependencies.

  3. Provides single-file components.

Operation mode: Cli tool

The installation

Installation:

NPM install - g @ vue/cliCopy the code

Update:

NPM update - g @ vue/cliCopy the code

Check whether the installation is successful:

vue --version
Copy the code

Project structures,

  1. Create a project:
vue create project-demo
Copy the code
  1. Select preset:
  • The difference between the first two is mainly vue 2 and vue3

Manual selection:

  • Click the space here to check/cancel

The default naming is stored in the.vuerc file of the computer’s C:\Users\ current user name. You can delete it if you don’t need it, and the next time you create a project you won’t have this default option.

Git is just a “yes” option

  1. Has been created

Directories and Files

File directory introduction:

Single file component

• Single-file components can store component functions (templates, views, logic) in a file with a.vue extension.

  1. Template corresponds to the structure/template of the current component, that is, the template property of the previous component, and can be manipulated internally using syntax such as interpolation.

  2. Script is about the functionality of a component. Export default is the module provided by ES6. In this way, modules are exported, and the exported object is the configuration object of the current component.

  • nameIs the name of the current component, which is the same as the file name
  • propsIs some data passed by an external component
  • You can also set some laterdata.methodsSuch as

  1. styleIs the style

Scoped sets these styles to be valid only for the current component

Imported components:

If you want to use other components, you need to import them, as shown in the following figure:

In the project you create, app.vue is the root component of the project, which is the root instance. But there is no new Vue({}) internally to create the root instance, because vue-CLI puts it in main.js.

  • Vue. Config. productionTip = false is an error message in the production phase. If the error message is in the development phase, set it to true.

  • H is a function inside vue that is used to create a DOM for the component. Passing App into h will give you a dom structure set to render. Render then renders the structure, separating the entry file from the root component. Can be understood as a fixed form, does not need to change.

Differences between single-file components and the traditional approach

  1. It is now easier to use

  2. CSS is included for higher built-in and maintainability.

  3. Vue-cli has some built-in preprocessors that allow you to write directly in the

Packaging and deployment

packaging

Packaging is compiling a Vue CLI project into a browser-aware file.

npm run build
Copy the code

A new folder is generated:

The deployment of

Deployment refers to deploying the Vue project Dist directory to the server.

Install static file server:

NPM install - g serveCopy the code

Deploy using serve command under DIST (two ways):

Methods a

Go to the dist folder first, then type Serve

Way 2

Enter serve and then the folder name dist