关于vue.js:Vue-Cli对比

vue脚手架2.0和4.0+的比照

1. 命令：

装置

// 2.0npm install vue-cli -g// 4.0+npm install -g @vue/cli

初始化一个新我的项目：
```
// 2.0默认标准版：vue init webpack 我的项目名简化版: vue init webpack-slimple 我的项目名// 4.0+vue create 项目名称注：装置@vue/cli须要先卸载vue-cli，如须要同时应用vue-cli和@vue/cli请装置：npm install -g @vue/cli-init -g //装置完后 就还能够应用 vue init 命令另外在终端输出   vue ui将会在浏览器关上一个页面，可通过可视化的形式新建一个我的项目
```
附上选项：
Please pick a preset: 抉择配置
- Default ([Vue 2] babel, eslint) // vue2默认配置
- Default (Vue 3 Preview) ([Vue 3] babel, eslint) // vue3默认配置
- Manually select features // 手动筛选
  - 可选项：
  - | | | | |
    | :--- | --------------------------------- | ------------------------------------------------------------ | ---- |
    | 序号 | 选项 | 形容 | |
    | 1 | Choose Vue version | 抉择Vue版本 | |
    | 2 | Babel | vue我的项目中广泛应用es6语法，但有时咱们的我的项目须要兼容低版本浏览器，这时就须要引入babel插件，将es6转成es5 | |
    | 3 | TypeScript | TypeScript通过增加类型来扩大JavaScript。通过理解JavaScript，TypeScript能够节俭您捕捉谬误的工夫并在运行代码之前提供修复。任何浏览器，任何操作系统，任何运行JavaScript的中央。齐全开源 | |
    | 4 | Progressive Web App (PWA) Support | 渐进式Web应用程序（PWA）反对 | |
    | 5 | Router | 路由 | |
    | 6 | Vuex | Vuex 是一个专为 Vue.js 利用程序开发的状态管理模式。它采纳集中式存储管理利用的所有组件的状态，并以相应的规定保障状态以一种可预测的形式发生变化 | |
    | 7 | CSS Pre-processors | CSS预处理器，预处理器：比方要用sass或者cssNext就要依照人家规定的语法模式，就是用人家的语法去编写，而后人家把你编写的代码转成css。 | |
    | 8 | Linter / Formatter | 格式化程序 | |
    | 9 | Unit Testing | 单元测试 | |
    | 10 | E2E Testing | 端到端测试（end-to-end） | |
Pick the package manager to use when installing dependencies: // 抉择装置依赖项时要应用的包管理器
- Use Yarn 默认值
- Use NPM
yarn和npm都是包管理工具，然而yarn是簇新的，通过从新设计的npm客户端，于2016年10月公布，相比于npm，yarn在运行速度上有显著的晋升，安装时间变少，性能上也有很多改良， yarn的长处：装置速度快 (服务器速度快 , 并且是并行下载和离线模式) 版本锁定缓存机制
可参照npm和yarn的区别进一步理解
- 装置依赖:
  初始化之后须要npm install装置所须要的依赖，而4.0+则无需该操作，在初始化时已主动下载
- 运行:
```
 // 2.0 npm run dev // 4.0+
```
```
- 组件库手动抉择配置：  Check the features needed for your project:  (\*) Choose Vue version  // 指定vue版本  (\*) Babel // babel编译  (\*) TypeScript   ( ) Progressive Web App (PWA) Support // 是否反对**渐进式网页利用**（pwa）可见[简略介绍一下Progressive Web App(PWA)](https://juejin.cn/post/6844903556470816781)  ( ) Router  ( ) Vuex  (\*) CSS Pre-processors // 是否启用css预处理器，如sass，stylus  (\*) Linter / Formatter // 是否进行代码格式化校验，如eslint  (\*) Unit Testing // 测试框架的引入  ( ) E2E Testing    Choose a version of Vue.js that you want to start the project with (Use arrow keys)  // 抉择我的项目内的vue的版本    > 2.x     3.x (Preview)      Use class-style component syntax？ **YES**   // 是否应用class格调的组件语法（TypeScript）    Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)？**YES**  // 是否应用babel做ts本义和提供对jsx的反对    Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) // 抉择css预编译器**Sass/SCSS +node-        sass**  Sass/SCSS (with dart-sass)    >Sass/SCSS (with node-sass)    Less    Stylus  Pick a linter / formatter config: (Use arrow keys)  // 抉择语法查看形式 应用标准版的eslint进行格局校验，tslint已在2019进行保护，并向eslint迁徙[放弃 TSLint，应用 ESLint](https://blog.csdn.net/qq_37164975/article/details/109766695)。  ESLint with error prevention only  ESLint + Airbnb config
```

ESLint + PrettierTSLint (deprecated)Pick additional lint features: (Press <space> to select, to toggle all, to invert selection)   // 代码查看的触发机会  **保留就查看**  (*) Lint on save( ) Lint and fix on commit pick a unit testing solution: (Use arrow keys) // 抉择测试解决方案  **Jest**Mocha + Chai>JestWhere do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)  // 心愿将eslint的配置和babel的配置放在哪   >In dedicated config filesIn package.jsonSave this as a preset for future projects? (y/N)   **NO**  保留该配置为当前其余我的项目的预设

2. 目录:

vue-cli2.0+	@vue/cli4.0+
- build // 我的项目构建(webpack)相干代码 --- build.js // 生产环境构建代码<br/>--- check-version.js // 查看node、npm等版本 --- dev-client.js // 热重载相干 --- dev-server.js // 构建本地服务器 --- utils.js // 构建工具相干 --- webpack.base.conf.js // webpack根底配置 --- webpack.dev.conf.js // webpack开发环境配置 --- webpack.prod.conf.js // webpack生产环境配置 - config // 我的项目开发环境配置 --- dev.env.js // 开发环境变量 --- index.js // 我的项目一些配置变量 --- prod.env.js // 生产环境变量 --- test.env.js // 测试环境变量 - src // 源码目录 --- components // vue公共组件 --- asset // 动态资源 --- store // vuex的状态治理 --- App.vue // 页面入口文件 --- main.js // 程序入口文件，加载各种公共组件 -static // 动态文件，比方一些图片，json数据等 .babelrc // babel编译配置 .gitignore // git上传须要疏忽的文件格式 README.md // 我的项目阐明 package.json // 我的项目根本信息 .eslintrc.js // Eslint的配置文件	-public // 公共文件夹 ---index.html //入口的html文件 -src ---assets //搁置动态文件的目录 ---components // vue公共组件 ---App.vue // 页面入口文件 ---main.ts // 入口文件，因为采纳了TypeScript所以是ts结尾 ---shims-vue.d.ts // 定义文件，为了在vue文件中能辨认到ts局部 .browserslistrc // 在不同前端工具浏览器和node版本的配置文件作用是设置兼容性 .eslintrc.js // Eslint的配置文件，不用作过多介绍 .gitignore //git上传须要疏忽的文件 package.json // 我的项目根本信息 README.md // 我的项目阐明 tsconfig.json

vue-cli2.0+

@vue/cli4.0+

- build // 我的项目构建(webpack)相干代码
--- build.js // 生产环境构建代码<br/>--- check-version.js // 查看node、npm等版本
--- dev-client.js // 热重载相干
--- dev-server.js // 构建本地服务器
--- utils.js // 构建工具相干
--- webpack.base.conf.js // webpack根底配置
--- webpack.dev.conf.js // webpack开发环境配置
--- webpack.prod.conf.js // webpack生产环境配置

- config // 我的项目开发环境配置
--- dev.env.js // 开发环境变量
--- index.js // 我的项目一些配置变量
--- prod.env.js // 生产环境变量
--- test.env.js // 测试环境变量

- src // 源码目录
--- components // vue公共组件
--- asset // 动态资源
--- store // vuex的状态治理
--- App.vue // 页面入口文件
--- main.js // 程序入口文件，加载各种公共组件

-static // 动态文件，比方一些图片，json数据等
.babelrc // babel编译配置
.gitignore // git上传须要疏忽的文件格式
README.md // 我的项目阐明
package.json // 我的项目根本信息
.eslintrc.js // Eslint的配置文件

-public // 公共文件夹
---index.html //入口的html文件

-src
---assets //搁置动态文件的目录
---components // vue公共组件
---App.vue // 页面入口文件
---main.ts // 入口文件，因为采纳了TypeScript所以是ts结尾
---shims-vue.d.ts // 定义文件，为了在vue文件中能辨认到ts局部
.browserslistrc // 在不同前端工具浏览器和node版本的配置文件作用是设置兼容性
.eslintrc.js // Eslint的配置文件，不用作过多介绍
.gitignore //git上传须要疏忽的文件
package.json // 我的项目根本信息
README.md // 我的项目阐明
tsconfig.json

移除了配置文件目录 config 和 build 文件夹，如果须要自定义配置，须要本人新建vue.config.js文件
移除了 static 动态资源文件夹，新增 public 文件夹，动态资源转移到public目录中，通过/xx.xx能够间接拜访，并且 index.html 挪动到 public 中
目录构造更加简洁

3.webpack打包:

默认版本不同：
2.0 + 个别采纳webpack3
4.0 + 个别采纳webpack4
可参照Webpack4.x实际理解更多对于webpack4的内容以及和webpck3之间区别
目录不同：
- 2.0 + 的目录内存在一个build文件夹寄存webpack的各种配置
  +----- build
  ------ build.js // 生产环境构建
  ------ check-versions.js // 查看版本(node, nmp)
  ------ utils.js // 构建所需的相干工具
  ------ vue-loader.conf.js // vue的各种loader配置
  ------ webpack.base.conf.js // webpack根底配置
  ------ webpack.dev.conf.js // webpack开发环境的配置
  ------ webpack.prod.conf.js // webpack生产环境的配置
- 4.0 + 将webpack的根底配置全副内嵌了，提供了集成的默认值，在目录中将不再呈现webpack的config配置
  那么，须要进行特异化的配置的时候怎么办呢？
  官网提供了一个vue.config.js文件进行批改配置
  另可参照vue.config.js 配置以及 vue 4.0 vue.config.js 配置实战
打包效率:
4.0 + 在打包和运行效率上要更优于2.0 +
灵活性:
- cli2个性化强一些，能够更敌对的配置webpack。
- cli4通用性强一些，达到真正的开箱即用，简直零配置，曾经将最适宜开发的配置打包封装。

vue cli 3.0和4.0的比照:

两者区别较小

两者在命令上是一样的
4.0相比拟于3.0有更丰盛的自定义选项
目录上:(3.0 > 4.0)
- 次要是路由和vuex默认目录的变动
babel配置上babel预设由@vue/appvue / babel-preset-app 改成了@vue/cli-plugin-babel/preset

优化了编译和打包效率

依赖的降级

"@vue/cli-plugin-babel" 由v3 的版本升级到了 v4
"@vue/cli-plugin-eslint" 由v3 的版本升级到了 v4
"@vue/cli-service" 由v3 的版本升级到了 v4
sass-loader由 v7 的版本升级到了 v8
core-js由 v2 的版本升级到了 v3
webpack-chain由 v4 的版本升级到了 v6
css-loader由 v1 的版本升级到了 v3
url-loader由 v1 的版本升级到了 v2
file-loader由 v3 的版本升级到了 v4
copy-webpack-plugin由 v4 的版本升级到了 v5
erser-webpack-plugin由 v1 的版本升级到了 v2
@vue/cli-plugin-pwa由 v3 的版本升级到了 v4
新增插件 vue add vuex vue add router
pug-plain已重命名为pug-plain-loader
废除vue-cli-service test:e2e
@vue/cli-plugin-unit-mocha 降级到Mocha 6
@vue/cli-plugin-unit-jest jest由 v23 降级到v24
@vue/cli-plugin-typescript 更好的ts(x)反对，胜过js(x)