2021-01-04

vue项目开发流程（教育类）

我们这个项目是一个教育类的移动端项目，我们用到的技术栈是vant ui和vue-cli 4脚手架 axios,router,vuex.
首先先搭建脚手架，vue create 项目名来搭建脚手架，在vue脚手架中配置router，css预编译器，vuex。
脚手架搭建完成后，进行多环境的配置在package.json 里的 scripts 配置 serve stage build，通过 --mode xxx 来执行不同环境，在根目录下创建.env.development 本地开发环境配置，.env.staging 测试环境配置，.env.production 正式环境配置。然后新建一个config的文件夹，在文件夹内新建index.js根据环境引入不同配置(process.env.VUE_APP_ENV)),并导出，再新建三个环境的js文件，在文件内配置请求的url。
为了统一管理请求的接口，我们还需要封装axios,先新建一个http文件夹，
文件夹内建一个request.js的文件用来封装axios,设置请求拦截，相应拦截，设置heard头，根据运行环境导入对应的baseurl。在新建一个api.js用来统一管理请求的api,最后新建一个用来封装请求方法的js文件，导出对应的方法在页面使用时导入即可。
我们还用到了vant ui 组件库，为了减少代码包过大，我们选择按需引入，
先通过npm i vant -S安装vant ui ,再通过npm i babel-plugin-import -D插件，和在babel.config.js中的配置来实现按需引入。
最后我们还需要进行移动端适配，主流的有rem和vm两种，在这个项目中我用的是rem。先下载lib-flexible postcss-plugin-px2rem这两个插件，然后创建vue.config.js文件进行配置，最后在main.js 文件中导入： import “lib-flexible/flexible”;就可以实现rem配置
组件封装