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  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 // 生产环境构建代码
--- 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)

你可能感兴趣的