第一步

npm install -g @vue/cli

命令
vue ui 打开一个 图形化界面管理项目 (不明觉厉)
vue create “文件夹名称”
vue serve

CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包，局部安装在每个 @vue/cli 创建的项目中。

  • 项目内部的 vue-cli-service 命令，提供 serve、build 和 inspect 命令。

vue-cli-service serve

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

vue-cli-service build

vue-cli-service inspect

webpack 审查，会输出webpack的内容。
// 输出webpack的配置到output.js中
vue inspect > output.js

错误 提示到页面中

在vue.config.js中设置

lintOnSave

  • Type: boolean | ‘warning’ | ‘default’ | ‘error’
  • Default: ‘default’是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。这个值会在 @vue/cli-plugin-eslint 被安装之后生效。设置为 true 或 ‘warning’ 时，eslint-loader 会将 lint 错误输出为编译警告。默认情况下，警告仅仅会被输出到命令行，且不会使得编译失败。如果你希望让 lint 错误在开发时直接显示在浏览器中，你可以使用 lintOnSave: ‘default’。这会强制 eslint-loader 将 lint 错误输出为编译错误，同时也意味着 lint 错误将会导致编译失败。设置为 error 将会使得 eslint-loader 把 lint 警告也输出为编译错误，这意味着 lint 警告将会导致编译失败。或者，你也可以通过设置让浏览器 overlay 同时显示警告和错误： ``` false：关闭每次保存都进行检测 true：开启每次保存都进行检测，效果与warning一样 ‘warning’：开启每次保存都进行检测，lint 错误将显示到控制台命令行，而且编译并不会失败。 ‘error’：开启每次保存都进行检测，lint 错误将显示到浏览器页面上，且编译失败。

// vue.config.js module.exports = { lintOnSave: ‘default’, devServer: { overlay: { warnings: true, errors: true } } } ```

webpack设置

https://cli.vuejs.org/zh/guide/webpack.html#%E4%BF%AE%E6%94%B9%E6%8F%92%E4%BB%B6%E9%80%89%E9%A1%B9

你需要熟悉 webpack-chain 的 API 并阅读一些源码以便了解如何最大程度利用好这个选项，但是比起直接修改 webpack 配置，它的表达能力更强，也更为安全。