乐趣区

关于vue.js:Vue-Cli对比

jiezi

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)
退出移动版