What is scaffolding

Cli, commonly known as scaffolding. Command Line Interface. Vue – CLI is the official release of vUE development project scaffolding.

The role of scaffolding

In life, scaffolding is the frame we put up to build a house. Preparations for our house. Cli, too, is for us to develop projects, build the environment. Its main function is

  • Set up the Vue development environment.
  • Configuration webpack. Especially this one. Previously we had manually configured webPack. The first is particularly cumbersome, and there is an obvious problem with versioning. An error may occur if the version is incorrect. From now on, these tasks will be handed over to our CLI, which will automatically help us configure webPack.

The premise of using scaffolding

  1. Vue – CLI uses the webPack template so we need to install Webpack
  2. Node Webpack relies on Node so we need to install Node as well

Install the cli

NPM install @ vue/[email protected] - gCopy the code

The scaffold can be installed globally, there is no need to install locally, this is the version of scaffold 3, if we want to use the content of CLI2, we need to pull another template

npm install @vue/cli-init -g
Copy the code

Vue-cli2 Initializes the VUE project

Command is

vue init webpack my-project-name
Copy the code

Some configuration when initializing the project

  1. My-project-name — the name of the Project. Default: my-project-name
  2. Project Description Indicates the Project description
  3. Author By default the Author will go to.gitConfig on the computer to find the Author name
  4. Vue Build Specifies whether to use runtime+ Compiler or Runtime +only for the Vue version.
  5. Install vue-router? Whether to install front-end routes
  6. Use ESlint to lint your code? Whether to use ESlint to standardize your code
  7. Set up Unit tests Whether to Set unit tests
  8. Setup e2E Tests with Nightwatch Whether to set end-to-end tests
  9. NPM or YARN

Once configured, a series of files will be generated for us.Many of these files have been manually implemented before, but the scaffolding tool can automatically generate them for us, which is pretty lame.

Analyze scaffold generation project file structure

Run-time only and Runtime +compiler

  • The size varies, but the runtime+compiler is larger, and the extra part of the compiler code is used to compile the Template template.
  • Different performance, run-time only has higher performance

Why is the Runtime-only version performing better

To understand why runtime-only is better, you need to understand how template is compiled.

The process of compiling the template of a VUE instance or VUE component

  1. Template –>ast. The first step is to parse (parse) the template into an abstract syntax tree
  2. Ast –>render function (compile our AST into render function)
  3. Render (render) –>virtual DOM (render)
  4. Vitual DOM –> Real DOM (mount virtual DOM to the page)

In fact, the extra runtime+compiler code is just to help us compile the template, that is, to complete our first and second steps. Compile our template template into the render function.

But actually in a real project, if we use.vue file development. Our VUE version does not require compiler implementation at all. Why?

Vue router and VUe-template-compiler. Vue-router is used to load the. Vue files. Vue template-compiler is used to compile the template in our.vue file into the render function. ** The exported component is actually packaged with Webpack and does not have a template at all. Because its template is already compiled into the render function. In other words, any component you export from any.vue file, the template is already compiled and you don’t need to implement it at all. You just need to complete the last two steps. Here we can print out what our component really is. This component has been treated as a plain Object object. There is no template template. And here we can see that it has a render method.

conclusion

When developing a vue project using a. Vue file, the output component is actually rendered into the render function, so our vue does not need to compile the template, we should choose the run-time only version, which has less code and higher performance. However, when we develop a VUE project using the Template template, we need to install the Runtime + Compiler version to help us parse the template.

Vue-cli3 initializes the project

The characteristics of the vue – cli3

  • Zero configuration, all previous configuration for WebPack is hidden.
  • Vue-cli2 is based on WebPack3, and vue-cli3 is based on WebPack4
  • Remove the static folder, add the public folder, and move index.html to the public folder
  • Vue – cli3 providesvue uiCommand to provide visual configuration

Initialize the project

Initialize the VUE project with vue-cli3 with the following command

vue  create my-project-name
Copy the code

Generate so many configuration options

Vue-cli3 generated project structure

Minor differences between vuE-CLI3 and vue-CLI2 generated items

  1. Used to benpm run dev Order and now it isnpm run serveCommand because the scripts of package.json have changed.
  2. Main.js is slightly different

The main vuecli3. Js:

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Copy the code

The main vuecli2. Js:

import Vue from 'vue'
import App from './App'
console.log(App);
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

Copy the code

In essence, they are the same. The vue source code determines whether your vue instance has an EL attribute, and if so, mounts it to that element. The code for Vuecli3 simply mounts the instance directly onto the element.

How to modify the project configuration generated by VUE-CLI3

When we use vuE-CLI3 to build the project, the webpack configuration is hidden. What if you want to view or modify the webPack configuration?

  1. Vue UI. As mentioned earlier, the Vuecli3 scaffolding helps us with graphical management through vue UI commands. The idea is to create a local server where we can import our VUE project with a list of configurations to configure.

2. Find the hidden configuration file. The path is anode_modules/@vue/cli-service/webpack.config.jsThe webpack.config.js file itself is nothing, it’s an import'./lib/Service'Contents of the folder. 3. If you want to modify the WebPack configuration file, you can create a new file in your own project: vue.config.js. It’s a fixed name you can’t just name it. You can configure WebPack in this file and it will merge your configuration with its hidden configuration.