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

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的对比:

两者区别较小

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)