What is the difference between vue-cli3 and vue-cli2

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

The operating environment of this article: Windows 10 system, Vue version 2.9.6, DELL G3 computer.

What is the difference between vue-cli3 and vue-cli2

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

vue- The project architecture of cli 3 completely abandons the original architecture of vue-cli 2. The design of 3 is more abstract and concise (you can introduce it in detail later)

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

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

Since vue-cli 3 has also learned the zero-configuration idea of ​​rollup, so After the project is initialized, there is no more familiar build directory, and there are no more configuration files such as webpack.base.config.js, webpack.dev.config.js, webpack.prod.config.js.

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

The static folder is removed and the public folder is added. And index.html has been moved to public

The directory structure of the project created by Vue-cli3

vue_project

• ## -- node_modules #Installed library dependencies

• -- public # Equivalent to static in vue-cli2, packaged and placed intact in dist

• -- src # Source code

• -- .browserslistrc # Configure browser-related things

## -- .gitignore # Configure git-related things, you can Configuration ignores some files
-- .babel.config.js # Configuration babel

• ## -- package.json

• -- package-lock.json # The actual installation version displayed (package.json may have ~ or ^ followed by a version number, so different versions of dependencies may be installed)

• -- readme.md # markdown document

• Startup project and packaging project

# Startup project

npm run serve

# Packaging project

npm run build

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

{
  "name": "vue3test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    # 运行项目
    "serve": "vue-cli-service serve",
    # 打包项目
    "build": "vue-cli-service build"
  },
  # 运行依赖
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
# 开发依赖
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.4.0",
    "@vue/cli-service": "^4.4.0",
    "vue-template-compiler": "^2.6.11"
  }
}

[Related recommendations: "

vue.js Tutorial

"]

The above is the detailed content of What is the difference between vue-cli3 and vue-cli2. For more information, please follow other related articles on the PHP Chinese website!