Vue CLI

wangdx大约 3 分钟

介绍

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

通过 @vue/cli 实现的交互式的项目脚手架。
通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
一个运行时依赖 (@vue/cli-service)，该依赖：
- 可升级；
- 基于 webpack 构建，并带有合理的默认配置；
- 可以通过项目内的配置文件进行配置；
- 可以通过插件进行扩展。
一个丰富的官方插件集合，集成了前端生态中最好的工具。
一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

创建一个项目

~/.vuerc

被保存的 preset 将会存在用户的 home 目录下一个名为 .vuerc 的 JSON 文件里。如果你想要修改被保存的 preset / 选项，可以编辑这个文件。

在项目创建的过程中，你也会被提示选择喜欢的包管理器或使用淘宝 npm 镜像源以更快地安装依赖。这些选择也将会存入 ~/.vuerc。

1.
vue create hello-world

plugins

@vue/cli-plugin-babel

默认使用 Babel 7 + babel-loader + @vue/babel-preset-app，但是可以通过 babel.config.js 配置使用任何其它 Babel 预设选项或插件。

默认情况下，babel-loader 会排除 node_modules 依赖内部的文件。如果希望显性编译一个依赖的模块，你需要将其添加入 vue.config.js 中的 transpileDependencies 选项：

@vue/cli-plugin-eslint

英文原版open in new window

vue-cli 的 eslint 插件

注入的命令

vue-cli-service lint

使用：vue-cli-service lint [options] [...files]

选项：

  --format [formatter] 指定格式器 (默认值：codeframe)
  --no-fix             不修复错误
  --max-errors         指定使构建失败的错误数量 (默认值：0)
  --max-warnings       指定使构建失败的警告数量 (默认值：Infinity)

校验并修复文件中的错误。如果没有指定文件，则会校验 src 和 test 中的所有文件。

也支持其它 ESLint CLI 的选项open in new window。

配置

ESLint 可以通过 .eslintrc 或 package.json 中的 eslintConfig 字段进行配置。

通过 eslint-loader 在每次保存时执行校验的选项是默认开启的，你也可以通过 vue.config.js 中的 lintOnSave 选项将其关闭。

module.exports = {
  lintOnSave: false,
};

当设置为 true 时，eslint-loader 将会抛出校验错误作为警告。默认情况下警告只会记录在终端，并不会导致编译失败。

你可以使用 lintOnSave: 'error' 将校验错误显示在浏览器里的浮层中。这会强制 eslint-loader 总是抛出错误。这时也意味着校验错误会导致编译失败。

你也可以配置浮层同时展示警告和错误：

// vue.config.js
module.exports = {
  devServer: {
    overlay: {
      warnings: true,
      errors: true,
    },
  },
};

当 lintOnSave 是 truthy 值时，eslint-loader 会被同时运用在开发环境和生产环境中。如果你在生产环境构建时禁用 eslint-loader，可以进行如下配置：

// vue.config.js
module.exports = {
  lintOnSave: process.env.NODE_ENV !== "production",
};

在已创建的项目中安装

vue add @vue/eslint

注入的 webpack-chain 规则

config.module.rule('eslint')
config.module.rule('eslint').use('eslint-loader')