安装：
npm i @vue/cli -g
基于脚手架创建 vue 项目：
- 选中 vue 版本
- 自定义一些配置项
vue create xxx
//项目需要符合npm包规范（数字和小写字母）
项目目录：
特殊：
一般来讲，public/index.html 页面模板中不会编写啥内容，一般都是基于 webpack 把各组件（各页面）的内容合并编译后，插入到 index.html 的#app 的容器中。
但是部分需求还需要在这个页面中写：
-
我们后期可以基于 vue3 中的传送门技术，把组件中的部分内容插入到页面除 app 外的其他容器中，此时我们需要在页面中写其他容器。
-
我们也可以把一些纯静态的内容，而且是不想基于 vue 的模板编译的写死在页面模板中，这样做很少，因为即使写在 vue 组件中，我们也可以基于 v-pre 指令让其跳过编译。
-
因为 webpack 会把项目中的 css（或 js）合并压缩打包成一个文件【后期也可以做分割打包[例如路由懒加载]】，这样在页面渲染的时候，加载 css 和 js 就会慢，如果我们想在没有加载完这些资源文件之前，先呈现给用户 loading（或骨架屏效果）效果，来减少白屏事件，那么我们就在页面模板中，单独写一写骨架屏的实现，这些代码是不能和主要内容打包在一起的。
-
webpack 打包是按照 ES6Module(或 CommonJs)模块规范，分析出模块间的依赖，然后按照依赖打包在一起，所以需要我们的模块支持 ES6Module(或 CommonJs)模块规范；如果不支持这些依赖：
■ 手动改为支持的 module.exports=xxx
■ 在页面模板中基于 script src="" 导入，后期基于 window.xxx 使用
手动修改脚手架的配置信息：
https://cli.vuejs.org/zh/guide/
- publicPath：指定打包后，导入资源的起始路径，默认“/”,从项目根目录下找，这样我们必须保证部署到服务的根目录下，否则会出现找不到资源；我们可以给其修改为"./"，这样不论部署到那个目录下，都是从当前目录开始查找。
- assetsDir：
- pages：配置多页面【不同的页面分别指定：入口、出口、依赖的模块...】
- lintOnSave：设置ESLint语法检测的规则
- Type: boolean | 'warning' | 'default' | 'error'
- 默认："default"【开发和生产环境都需要检测，而且只要有一个不符合语法规范就会编译失败】
- 设置为 true 或 'warning' 时，eslint-loader 会将 lint 错误输出为编译警告。默认情况下，警告仅仅会被输出到命令行，且不会使得编译失败。
- 设置为 error 将会使得 eslint-loader 把 lint 警告也输出为编译错误，这意味着 lint 警告将会导致编译失败。
- false 取消ESLint词法检测
- 真实项目中，开发环境设置为true、生产环境下设置为false（加快打包速度）
- Type: boolean | 'warning' | 'default' | 'error'
- transpileDependencies：默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。所以为了考虑浏览器兼容，要把node_modules 中基于ES6代码写的模块，也进行编译（只不过我们使用的模块，已经把ES6编译成ES5了）
- productionSourceMap：如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。【方便在线调试】，真实开发的时候，设置为false，以此让打包速度更快。
- configureWebpack:脚手架中没有设置的，我们基于configureWebpack加入进去
- chainWebpack:脚手架设置好的我们自己去修改「链式写法修改」
devServer:修改webpack-dev-server的配置项
devServer.proxy:实现proxy跨域代理
//语法完全按照 http-proxy-middle-wars
devServer: {
proxy: {
//请求地址是以"/api"开始的{基于前缀区分，代理到不同的服务器}
'/api': {
//代理到真实服务器
target: 'http://127.0.0.1:9999',
//把发送请求时侯的origin改为代理的服务器源
changeOrigin: true,
//重写的地址 把地址中的"api"替换为""
pathRewrite: {
'^/api': ''
}
},
//如果项目中只需要代理一台服务器，这样写可以
"":{
target:"http://127.0.0.1:9999"
}
}
}
请求的地址："/api/user/list"
代理服务器地址:"http://127.0.0.1:9999/api/user/list"
真实请求地址:"http://127.0.0.1:9999/user/list"
关注注脚手架创建项目的浏览器兼容性
webpack配置项中默认已经：
- 基于postcss-loader给CSS设置前缀
- 基于Babel-loader把ES6转换为ES5
如果想兼容更多的浏览器，自己在package.json中的browserlist兼容浏览器
问题：某些ES6内置类，是Babel-loader无法编译处理兼容的，例如promise...，所以我们需要导入@babel/polyfill【这个模块中把ES6中很多常见的内置类基于ES5的语法重写了】
脚手架默认安装的模块
-
vue
-
vue-template-compiler
-
ESLint及Babel相关的
但是配置项中已经把less/sass的编译处理写了，我们想用哪一个，直接安装对应模块和加载器即可
npm i less@3 less-loader@7 --save-dev
注意安装低版本，不要安装最新版本
