“This is the 13th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

Hello, everyone, I touch fish small public, the real strong, will not complain, if you do not want to be looked down upon by others, you have to pay more than others ten times a hundred times more effort, to stand higher than others. The last article was ten ways to deweight JS; Today we are going to learn the difference between Vue Cli2 and Vue Cli3 and Vue Cli4.

Vue Cli2

1. Install vue-CLI globally

CNPM install -g vue-cli install -g vue-cliCopy the code

2. Check the VUE version

vue -V
Copy the code

3. Install webPack globally

cnpm install -g webpack
Copy the code

4. Install the local WebServer of webPack globally

cnpm install -g webpack-dev-server
Copy the code

5. Build projects

vue init webpack demo
Copy the code

6. Start the project

npm run dev
Copy the code

7. Build the project directory as follows

Vue Cli3

1. Install the 3.0 package

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

2. Check whether the version is 3.0

 vue -V
Copy the code

Create a new project

vue create my-project
Copy the code

4. Start the project

npm run serve
Copy the code

5. Build the project directory as follows

Summarize the differences between Vue Cli2 and Vue Cli3

The two project file directories are also very different

(1) Vue. Config. js is not installed for 2.0, and the config file is stored in the config file directory, as well as a build folder.

(2) Node-Model is automatically downloaded for 3.0 installation projects, there is no build and config folder, there are more EsLint and vuex options; Also, the commands to build and start a project are different, and the 3.0 project directory is simpler.

Vue Cli4

Install the 4.0 package

NPM install -g@vue // Install the latest version without specifying the version numberCopy the code

The other steps are the same as in 3.0

The built project directory is as follows

Summarize the differences between 3.0 and 4.0

(1) Manually set router and store when creating the project; The path of these two directories is different,4.0 has router and Store folders to expand more

(2), the configuration of presets in babel.config.js changes from @vue/app to @vue/ CLI-plugin-babel /preset

(3) Package. json dependency upgrade, “@vue/cli-plugin-babel”, “@vue/cli-plugin-eslint”, “@vue/cli-service” upgraded from v3 to V4, Core-js was upgraded from 2.0 to 3.0.

Conclusion:

This article is a summary of some articles on the Internet, just said some obvious differences, in fact, FOR scaffolding I do not understand its principle, interested friends can go to study. Well, this is the end of the article, welcome everyone (like + comment + attention) have a question can exchange with each other. I hope this article is helpful and I hope you can support me more. Today is the 13th day of my participation in the first Wenwen Challenge 2022. Come on!