Vue-Cli该如何使用？Vue-Cli学习笔记，持续记录

Vue-cli 学习记录

1. 模式和环境变量

修改.Env 环境变量文件之后，需要重新运行 server 才会生效。环境变量通过 process.ENV 访问。可以在项目根目录中放置下列文件来指定环境变量：

.env            # 在所有的环境中被载入
.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]     # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。你可以在应用的代码中这样访问它们：

模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式：

development 模式用于 vue-cli-service serve
test 模式用于 vue-cli-service test:unit
production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e

2.Vue.config.js 配置项

相关说明：https://cli.vuejs.org/zh/

官方文档：https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE

配置项说明：https://cli.vuejs.org/zh/config/

调整 webpack 相关配置：https://cli.vuejs.org/zh/guide/webpack.html

3. 查看使用的 vue 和 vue-cli 版本

查看 vue 版本，在 package.json 中直接查看 vue 的版本，或者通过命令行。（https://blog.csdn.net/weixin_39788999/article/details/105022415）

npm list vue

查看 vue-cli 的版本号，通过命令行

vue -V

4.scss 版本过高导致无法编译

Vue-cli 使用 scss 是不需要进行任何配置的，npm 安装的时候安装的最新的 scss-loader 13.x，导致 vue-cli 5.x 编译一直失败，卸载强制安装 7.x 的 scss-loader 后编译成功。以下为 scss 安装命令：

npm install sass -D /* 局部安装  */
npm install sass-loader -D /* 局部安装  */

相关文档：https://blog.csdn.net/weixin_43856797/article/details/115966706

1. node-sass 把 sass 编译成 css
2. sass-loader 是 webpack 的一个 loader,  让构建工具可以处理.scss 文件。

5.sass 各种包的说明

1. sass 是由 ts 调用 dart-sass 实现的工具类，来编译 sass（以前是由单纯的 ts 实现的）
2. dart-sass 是由 dart 实现的, 通过 dart vm 运行 dart 是编译 sass（在 npm 可以看到该包已不被开放下载了）
3. node-sass 是由 node 调用 底层 c++ 实现的 libsass 来编译 sass

相关文章：https://www.cnblogs.com/yyh1/p/15954139.html 

6.eslint 代码检查

相关文档：https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint

关闭代码检查：https://blog.csdn.net/wumingid/article/details/104672576

Vue-Cli 配置说明

官方文档：https://cli.vuejs.org/zh/config

1.pluginOptions

这是一个不进行任何 schema 验证的对象，因此它可以用来传递任何第三方插件选项。（webpack）

2.configureWebpack

如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。

如果这个值是一个函数，则会接收被解析的配置作为参数。该函数既可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。

3.chainWebpack

是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。