Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "what is the difference between vue-cli3 and vue-cli2". The editor shows you the operation process through actual cases, the operation method is simple and fast, and it is practical. I hope this article "what is the difference between vue-cli3 and vue-cli2" can help you solve the problem.

Differences: 1. "vue-cli3" is based on webpack4, while "vue-cli2" is based on webpack3; 2. "vue-cli3" removes the static folder, adds a public folder, and moves "index.html" to public.

This article operating environment: windows10 system, Vue2.9.6 version, DELL G3 computer.

What's the difference between vue-cli3 and vue-cli2?

The github warehouse of vue-cli 3 has been moved from the original independent github warehouse to the vue project.

The project architecture of vue-cli 3 completely abandons the original architecture of vue-cli 2, and the design of 3 is more abstract and concise (can be described in more detail here)

Is vue-cli 3 based on webpack 4, vue-cli 2 or webapck 3?

Vue-cli 3 provides vue ui commands, visual configuration, and more user-friendly

Because vue-cli 3 also learned the zero configuration idea of rollup, after the initialization of the project, there is no previously familiar build directory, and there are no configuration files such as webpack.base.config.js, webpack.dev.config.js, webpack.prod.config.js, etc.

The design principle of vue-cli 3 is 0 configuration, build and config directories under the root directory of the removed configuration files.

The static folder was removed, the public folder was added, and index.html was moved to public

The directory structure of the project created by Vue-cli3

Vue_project

-- node_modules # installed library dependencies

-- public # is equivalent to static in vue-cli2 and is packaged and placed intact in dist

-- src # source code

-- .browserslistrc # configure browser-related things

-- .gitignore # configure something related to git. You can configure to ignore some files.

-- .babel.config.js # configure babel

-- package.json

-- the real installation version shown in package-lock.json # (package.json may have ~ or ^ followed by a version number, so different versions of dependencies may be installed)

-- readme.md # markdown documentation

Start the project and package the project

# start the project

Npm run serve

# package the project

Npm run build

Note: these commands are configured in the script of package.json

{"name": "vue3test", "version": "0.1.0", "private": true, "scripts": {# run project "serve": "vue-cli-service serve", # packaged project "build": "vue-cli-service build"}, # run depends on "dependencies": {"core-js": "^ 3.6.5" "vue": "^ 2.6.11"}, # Development depends on "devDependencies": {"@ vue/cli-plugin-babel": "^ 4.4.0", "@ vue/cli-service": "^ 4.4.0", "vue-template-compiler": "^ 2.6.11"}} what is the difference between vue-cli3 and vue-cli2? Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.