I met the Vue CLI

Vue CLI

Vue CLI 2

Create a project

vue init webpack vueCLI2test
Copy the code

Project directory structure

Difference between Runtimecompiler and RuntimeOnly

Create two new projects at the same time, the left is configured with runtimecompiler, the right is configured with RuntimeOnly, other configurations are the same:Obviously, the two configurations have different vUE running steps. A complete VUE running step is as follows:

Runtimecompiler goes through a full run, while RuntimeOnly starts rendering from the render function, which is more efficient and has less code.Use of the render function

But runtimeonly mode import components inside the APP also defines the template, then the template to render function of this part is how to deal with?

The answer is the Vue-template-compiler of Webpack. Through the work of vue-loader and vue-template-Compiler, component objects in.vue files are parsed into render functions.

NPM Run Dev and NPM Run Build processes

Vue CLI 3

Differences from Vue CLI 2

The directory structure

Hidden configuration

In contrast to CLI2, CLI3 aims to have zero configuration and hides the configuration files in the following folder: node_modules@vue\cli-service\package.json.

Add the configuration

Create a new vue.config.js file in the project root directory to add custom configurations, which will eventually be consolidated.