关于vue.js:Vue-Cli对比

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. 目录:

• 移除了配置文件目录 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 的比照:

两者区别较小

1. 两者在命令上是一样的
2. 4.0 相比拟于 3.0 有更丰盛的自定义选项

3. 目录上:(3.0 > 4.0)

   • 次要是路由和 vuex 默认目录的变动
4. babel 配置上 babel 预设由 @vue/appvue / babel-preset-app 改成了 @vue/cli-plugin-babel/preset

优化了编译和打包效率

1. 依赖的降级

• “@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)