vue-cli4.xx从0到1搭建项目

目前vue-cli已经更新到了4.5.4版本(2020/8/27)，先更新下版本cnpm i -g @vue/cli

安装好cli后 新建项目 vue create <项目名>

出现preset配置，根据需要进行选择

选择Babel,router,vuex,css预编译，校验代码可选

项目创建好后，配置一些常用配置：

1.webpack配置

module.exports = { ... }

需要注意的是：

cli4已经没有 webpack.config.js 和 config文件夹了，配置需要在根目录下创建vue.config.js，它是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写

2.webpack常用配置

①.配置不同的开发环境：

开发环境

②自动为css添加浏览器前缀

image.png

③px2rem，px自动转换rem
（这里需要配合lib-flexible使用，lib-flexible设置html的font-size）

image.png

注意②③这两个关于css的配置要在module.exports = { ... }里注册

image.png

3.最后封装个axios

至少有个封装的axios才好称为搭项目
主要封装两个功能
baseUrl
请求拦截设置token

总结：以上这些是项目搭建过程中 最基本的配置，第三方插件的配置得参考插件说明，以后遇到好用的配置再回来补充