日常工作中 @vue/cli 需要关注的一些配置

为了让人容易理解，且不踩坑，官方文档会写的很详细

我们在熟练使用之后，需要提炼属于自己的知识点和关注点，总结以便后续快速查阅

官网文档地址https://cli.vuejs.org/zh/guide/

一、介绍

注意最新版是 @vue/cli 不是 vue-cli

@vue/cli
- 项目脚手架
- 包含运行时依赖 @vue/cli-service，可升级，同步升级其他如 webpack 等工具
- 包含丰富的官方插件集合，如 @vue/cli-plugin-babel、@vue/cli-plugin-eslint 等
- 支持图形化创建、管理项目
@vue/cli-service 作为 devDependencies 局部安装在项目中，提供 vue-cli-service 命令

二、安装

Node.js 版本最好在 10 以上

若存在旧版 `vue-cli` 需要提前卸载

npm uninstall vue-cli -g
# OR
yarn global remove vue-cli

安装

npm install -g @vue/cli
#  OR
yarn global add @vue/cli

安装完成之后，可以全局使用 vue 命令

安装各种插件和扩展后， vue 可以使用的命令有：

vue serve // 启动开发原型项目
vue build // 构建项目
vue config // 审查或修改全局的 CLI 配置
vue ui // 启动图形化界面创建或者管理项目
vue create // 创建项目
vue inspect // 查看当前项目 webpack 配置

升级

npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli

三、基础知识

原型开发（单纯以一个 js / vue 文件启动）

1、需要安装全局扩展

npm install -g @vue/cli-service-global

2、开发一个页面

vue serve 
    -o, --open  打开浏览器
    -c, --copy  将本地 URL 复制到剪切板
    -h, --help  输出用法信息
    [entry], mycomponent.vue/app.vue/index.js/或其他 .js / .vue 类型入口文件

例子:

vue serve mycomponent.vue

3、构建一个生产包

vue build 
    -t, --target  构建目标 (app | lib | wc | wc-async, 默认值：app)
    -n, --name  库的名字或 Web Components 组件的名字 (默认值：入口文件名)
    -d, --dest  输出目录 (默认值：dist)
    -h, --help 输出用法信息
    [entry], mycomponent.vue/app.vue/index.js/或其他 .js / .vue 类型入口文件

例子:

vue build -t app mycomponent.vue

创建项目

1、使用 cli 创建: vue create 创建项目

根据命令行交互，选择配置

默认的 preset 包含了基本的 Babel + ESLint

vue create myapp

2、使用图形界面创建

vue ui 启动一个图形界面来创建和管理项目

vue ui

CLI 服务

1、启动项目服务

初始项目中，存在命令

// package.json
{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }
}

2、启动项目命令

npm run serve
# OR
yarn serve

3、命令详解

vue-cli-service serve

基于 webpack-dev-server 启动一个开发服务器

开箱即用的模块热重载

vue-cli-service serve
    --open    在服务器启动时打开浏览器
    --copy    在服务器启动时将 URL 复制到剪切版
    --mode    指定环境模式 (默认值：development)
    --host    指定 host (默认值：0.0.0.0)
    --port    指定 port (默认值：8080)
    --https   使用 https (默认值：false)

vue-cli-service build

构建项目

vue-cli-service build
    --mode        指定环境模式 (默认值：production)
    --dest        指定输出目录 (默认值：dist)
    --modern      面向现代浏览器带自动回退地构建应用
    --target      app | lib | wc | wc-async (默认值：app)
    --name        库或 Web Components 模式下的名字 (默认值：package.json 中的 "name" 字段或入口文件名)
    --no-clean    在构建项目之前不清除目标目录
    --report      生成 report.html 以帮助分析包内容
    --report-json 生成 report.json 以帮助分析包内容
    --watch       监听文件变化

vue-cli-service inspect

查看项目的 webpack config

vue-cli-service inspect
    --mode    指定环境模式 (默认值：development)

4、缓存和并行

cache-loader

缓存编译结果，下次编译复用
默认为 Vue/Babel/TypeScript 编译开启缓存。文件缓存在 node_modules/.cache
遇到编译问题，可以删除缓存试试

thread-loader

多线程转译代码，加快转译速度
会在多核 CPU 上为 Babel/TypeScript 转译开启

5、Git Hook

@vue/cli-service 会安装 yorkie

在 package.json 中配置 git hook

// 在 pre-commit 阶段，执行 lint-staged
// lint-staged 时候若提交有 js、vue文件，执行
// "vue-cli-service lint",
// "git add"
// 进行校验
{
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
   "lint-staged": {
    "*.{js,vue}": [
      "vue-cli-service lint",
      "git add"
    ]
  }
}

四、开发

兼容性

1、browserlist

根据 package.json 中的 browserlist 字段或者 .browserlistrc 文件，指定需要支持的浏览器范围

该值会被 @babel/preset-env 和 Autoprefixer 来确定需要转译的
javascript 特性和需要添加的浏览器前缀

2、polyfill

useBuiltIns：

usage
- 根据 browserlist 目标，检测源代码中需要转化的语言特性，自动加载对应的 polyfill
entry
- 在入口文件添加 import 'core-js/stable'; import 'regenerator-runtime/runtime';
- 会根据 browserslist 目标导入所有 polyfill
false
- 构建一个库或者 Web Component
- 确保你的库或是组件不包含不必要的 polyfills。打包 polyfills 应当是最终使用你的库的应用的责任

// babel.config.js
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry"
      }
    ]
  ]
}

3、现代模式

产生两个应用的版本：一个现代版的包，面向支持 ES modules 的现代浏览器，另一个旧版的包，面向不支持的旧浏览器

vue-cli-service build --modern

现代版的包会通过