vue 从入门到精通之【@vue/cli】(三)

安装：

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 使用

手动修改脚手架的配置信息：

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（加快打包速度）
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 注意安装低版本，不要安装最新版本