共计 5448 个字符，预计需要花费 14 分钟才能阅读完成。
vue 脚手架 2.0 和 4.0+ 的比照
1. 命令：
-
装置
// 2.0 npm 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 + Prettier
TSLint (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
>Jest
Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) // 心愿将 eslint 的配置和 babel 的配置放在哪
>In dedicated config files
In package.json
Save 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 // 我的项目开发环境配置 – src // 源码目录 -static // 动态文件，比方一些图片，json 数据等 |
-public // 公共文件夹 —index.html // 入口的 html 文件 -src |
- 移除了配置文件目录 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 配置实战
- 2.0 + 的目录内存在一个 build 文件夹寄存 webpack 的各种配置
- 打包效率:
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)