vue-cli基础知识及其使用
vue-cli介绍
简介：
Vue CLI 是 Vue 的项目的一个开发工具，简单来说，可以快速生成一套基于Vue完整的前端框架 ，因此也称之为脚手架。（vue3中也可以使用vite作为全新的脚手架）
Vue CLI 是构建在 Webpack 之上的，因此开发服务器和构建功能和性能都将是 Webpack 的超集。
主要功能
CLI
CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速创建一个新项目的脚手架。
CLI 服务
CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包，局部安装在每个 @vue/cli 创建的项目中。CLI 服务是构建于 webpack 和 webpack-dev-server 之上的。它包含了：
-
加载其它 CLI 插件的核心服务；
-
一个针对绝大部分应用优化过的内部的 webpack 配置；
-
项目内部的 vue-cli-service 命令，提供 serve、build 和 inspect 命令。
CLI 插件
CLI 插件是向你的 Vue 项目提供可选功能的 npm 包，例如 Babel/TypeScript 转译、ESLint 集成、单元测试和 end-to-end 测试等。
版本号及名称问题
- Vue CLI 4.5以下，只能创建Vue2项目
- Vue CLI 4.5及以上，可以创建Vue3项目，当然，创建项目的时候可以选择Vue2项目
- @vue/cli是vue-cli版本3以上的npm包名称：
如果是安装3以下版本的脚手架，命令：npm install -g -cli@版本号
如果是安装3以上版本的脚手架，命令：npm install -g @vue/cli@版本号
vue-cli使用webpack进行打包编译、实现热更新等功能。它的版本号和webapck基本是对应的。
- vue-cli3对应webappck3
- vue-cli4对应webappck4
- vue-cli5对应webappck5
使用cli安装与运行项目
vue-cli2
npm install vue-cli -g //下载
vue init webpack 2.0project //创建项目
启动项目
npm run dev
vue-cli3/cli4
npm install -g vue@cli //下载
vue create 3.0project //或通过视图创建项目：vue ui 3.0project为自定义项目名称
启动项目
npm run serve
项目结构
vue-cli2 
vue-cli3/4
vue-cli3/cli4中移除了配置文件目录：config 和** build **文件夹。
同时移除了 static 静态文件夹，新增了 public 文件夹，将 index.html 移动到 public 中。
vue-cli全局配置vue.config.js
全局 CLI 配置简介
你也可以使用 vue config 命令来审查或修改全局的 CLI 配置
vue.config.js用法简介
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。
这个文件应该导出一个包含了选项的对象：
module.exports = {
// 选项...
}
vue.config.js常用配置详解
publicPath
| 类型 | 默认值 | 含义 |
|---|---|---|
| string | “/” | 部署应用包时的基本 URL。 |
示例：
服务器设置的访问地址为 ip + note
1.不配置
本地请求路径： file:///C:/cfile:///C:/css/app.881ff724.cssss/app.881ff724.css （页面空白）
网络请求路径： http://www.shixiaoshi.site/css/app.881ff724.css （无法访问）
2.配置相对路径
module.exports = {
publicPath:'./'
}
本地请求路径： file:///C:/Users/Administrator/Desktop/dist/css/app.881ff724.css（正常访问）
网络请求路径：http://www.shixiaoshi.site/note/css/app.881ff724.css（正常访问）
3.配置./app
本地请求路径： file:///C:/Users/Administrator/Desktop/dist/app/css/app.881ff724.css（页面空白）
网络请求路径：http://www.shixiaoshi.site/note/app/css/app.881ff724.css（无法访问）
outputDir
| 类型 | 默认值 | 含义 |
|---|---|---|
| string | “dist” | 当运行 vue-cli-service build 时生成的生产环境构建文件的目录 |
注：使用npm run build （vue-cli-service build）命令打包项目时，如果dist目录已经存在，打包之前原来的dist目录会被删除，构建时传入 --no-clean 可关闭该行为。
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build --no-clean", //--no-clean 可关闭该行为。
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
配置建议：不做修改
assetsDir
| 类型 | 默认值 | 含义 |
|---|---|---|
| string | “” | 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。 |
示例：不做修改，默认打包
示例：默认值修改为static
配置建议：不做修改
indexPath
| 类型 | 默认值 | 含义 |
|---|---|---|
| string | index.html | 指定index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。 |
示例：修改默认为“app/hello”
示例：修改默认为“hello.html”
配置建议：不做修改
lintOnSave
| 类型 | 默认值 | 含义 |
|---|---|---|
| boolean | ‘warning’ | ‘default’ |
这个值会在 @vue/cli-plugin-eslint 被安装之后生效。
| 参数名 | 主要作用 |
|---|---|
| true | ‘warning’ |
| ‘default’ | 会强制 eslint-loader 将 lint 错误输出为编译错误，导致编译失败。 |
| false | 关闭代码检查 |
| ‘error’ | 会使得 eslint-loader 把 lint 警告输出为编译错误，导致编译失败。 |
也可以通过设置让浏览器 overlay 同时显示警告和错误：
// vue.config.js
module.exports = {
devServer: {
overlay: {
warnings: true,
errors: true
}
}
}
配置建议：设置为 false，关闭代码检查
productionSourceMap
| 类型 | 默认值 | 含义 |
|---|---|---|
| boolean | true | 是否开启生产环境的 source map，设置为 false 可以加速生产环境构建。 |
什么是 source map?
source map 直译过来就是资源地图。使用source map定位的时浏览器控制台可以输出语句在项目文件的某一具体文件位置，便于代码调试。
示例：
在app.vue里 添加这样一条代码：console.log(‘11111’)
打包后查看浏览器控制台：
没有开启 productionSourceMap运行后浏览器控制台显示效果：
开启productionSourceMap运行后浏览器控制台显示效果：
可以看出，开启productionSourceMap后，可以定位到具体的app.vue文件里，便于线上代码调试！
配置建议：设置为 false，线上部署别人不会看到你的源码，更加安全，访问速度更快！
parallel
| 类型 | 默认值 | 含义 |
|---|---|---|
| boolean | require(‘os’).cpus().length > 1 | 启用多核打包 |
css
| 类型 | 默认值 | 含义 |
|---|---|---|
| Object | {} | 设置css相关属性 |
| 参数名 | 主要作用 |
|---|---|
| requireModuleExtension | |
| sourceMap | |
| loaderOptions | 向 CSS 相关的 loader 传递选项 |
css.loaderOptions
| 类型 | 默认值 | 含义 |
|---|---|---|
| Object | {} | 向 CSS 相关的 loader 传递选项。 |
module.exports = {
css: {
loaderOptions: {
css: {
// 这里的选项会传递给 css-loader
},
postcss: {
// 这里的选项会传递给 postcss-loader
}
}
}
}
支持的 loader 有：
devServer.proxy
vue项目开发时，会在本地请求某一接口，本地的服务一般是localhost：8080，在请求时会出现跨越问题。
devServer是请求的一个中间件，可以对请求进行拦截和处理。
主要应用：
-
- 通过代理解决请求跨域的问题
- 修改请求的路径
| 类型 | 默认值 | 含义 |
|---|---|---|
| string | Object |
解决方案：
方法一: 最简单的就是直接替换请求地址（xxx.config.js）
说明：
优点：配置简单，请求资源时直接发给前端（8080）即可。
缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）
方法二: 常用的方式（xxx.config.js）
module.exports = {
devServer: {
proxy: {
'/api1': {// 匹配所有以 '/api1'开头的请求路径
target: 'http://localhost:5000',// 代理目标的基础路径
changeOrigin: true,
pathRewrite: {'^/api1': ''}
},
'/api2': {// 匹配所有以 '/api2'开头的请求路径
target: 'http://localhost:5001',// 代理目标的基础路径
changeOrigin: true,
pathRewrite: {'^/api2': ''}//路径的正则替换
}
}
}
}
/*
changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
changeOrigin默认值为true
pathRewrite：本地请求的路径经过正则匹配传递给服务器的实际路径，如本地为"/api2"，传递给服务器后为"/"
*/
说明：
优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
缺点：配置略微繁琐，请求资源时必须加前缀。
注意：Vue配置的代理仅在本地开发下有效（打包后配置文件就木有用了！）