项目介绍
这个项目是我原来开发完成的，它是一个教育类型的移动端项目，移动端类的项目看似简单，则需要的插件，配置挺多的。
我用的是现在流行的vue-cli框架和vant-ui移动端组件库结合构建的项目。
因为vue是一种MVVM的渐进式框架，并且vue的两大核心：数据驱动、组件系统，用起来也很方便代码的书写，vue不仅易于上手，还便于与第三方库或项目整合。vant也是一个性能极佳，组件体积小，移动端适用场景多的框架。
项目开始时需要先通过vue create 项目名称创建一个vue的脚手架。
一、脚手架安装完成后，需要做一些项目的配置，我是先根据项目的大概情况，下载需要的依赖，例如axios，vant-ui,router等。依赖安装之后就是项目的配置了，我先配置的axios拦截器，我是通过在src目录下新建一个utils文件夹，在里面创建一个request.js文件。
1.在文件中导入axios对象
import axios from "axios"
2.创建一个axios的实例,配置一些根域名，接口超时时间等
const Server = axios.create({
baseURL: baseUrl, //根域名
timeout: 3000, //超时时间
})
3.之后就是定义请求拦截器，请求拦截器中可以进行一些token值的存储，loading加载的配置等一些信息
Server.interceptors.request.use((config) => {
let data=sessionStorage.getItem('wwt_token')
if(data!==null) {
config.headers.authorization='Bearer '+data
}
return config;
}, (error) => {
return Promise.reject(error);
});
4.还有就是定义响应拦截器，响应拦截器中可以定义一些token值过期，loading加载结束等操作
Server.interceptors.response.use((response) => {
console.log(response)
return response;
}, (error) => {
return Promise.reject(error);
});
5.之后将定义好的对象抛出
export default Server;
6.最后在main.js中导入，过载到vue的原型上
// 配置axios
import axios from './utils/Request'
Vue.prototype.$http=axios
二、axios配置完成后做的是一个多环境变量的配置
1.多环境变量需要在package.json里的scripts配置serve stage build，通过--mode xxx执行不同的环境
- 本地开发时是通过
npm run serve启动本地的项目，执行development - 如果要进行测试，则是通过
npm run stage进行打包测试，执行staging - 项目上线就是通过
npm run build打包上线，执行production
"scripts": {
"serve": "vue-cli-service serve --open",
"stage": "vue-cli-service build --mode staging",
"build": "vue-cli-service build",
}
之后就是在根目录下创建环境配置，通过.env.development创建本地开发环境配置
NODE_ENV='development'
# must start with VUE_APP_
VUE_APP_ENV = 'development'
.env.staging进行测试环境配置
NODE_ENV='production'
# must start with VUE_APP_
VUE_APP_ENV = 'staging'
.env.production进行上线环境配置
NODE_ENV='production'
# must start with VUE_APP_
VUE_APP_ENV = 'production'
这些配置完成后，可以通过process.env.VUE_APP_ENV访问，因为在根目录下创建的环境变量中并没有定义很多变量，只定义了基础的VUE_APP_ENV development staging production，变量我是统一在src下新建一个config文件夹进行管理的。
在config文件夹创建对应环境变量的文件，定义需要的变量，因为这样修改方便，不需要重启项目，符合开发习惯。
例如，用开发环境env.development举例，可以在config文件夹下创建一个env.development.js文件，在文件中抛出一个模块，模块中定义了项目地址、本地api请求地址、appid等一些配置信息。
// 本地环境配置
module.exports = {
title: 'vue-h5-template',
baseUrl: 'http://localhost:9018', // 项目地址
baseApi: 'https://test.xxx.com/api', // 本地api请求地址
APPID: 'xxx',
APPSECRET: 'xxx'
}
之后就是在config文件夹下创建一个index.js文件，根据不同的环境引入不同的配置就行
// 根据环境引入不同配置 process.env.NODE_ENV
const config = require('./env.' + process.env.VUE_APP_ENV)
module.exports = config
最后就是在定义好的拦截器中导入需要的环境，根据环境的不同引入不同的baseUrl地址，在axios创建的实例中，把通过解构赋值过来的地址赋给根域名就行。
import { baseApi } from '@/config'
console.log(baseApi)
三、因为这个项目是移动端类的，所以要做一些移动端的适配rem或vm。我在本次项目用的是rem的适配方案，我是通过postcss插件实现的，
1.首先是安装 lib-fixible 和 postcss-pxtorem插件，
cnpm install lib-flexible postcss-pxtorem --save-dev
2.之后在main.js中导入lib-flexible/flexible。
// 移动端适配
import 'lib-flexible/flexible';
3.之后通过在根目录下创建一个.postcssrc.js文件，可以在此配置的基础上根据项目需求进行修改。
// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
plugins: {
autoprefixer: {
overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
},
'postcss-pxtorem': {
rootValue: 75,
propList: ['*']
}
}
}
四、组件库是采用的VantUI组件按需引入的方式，
1.VantUI按需引入首先需要通过安装一个按需引入的插件，
cnpm install babel-plugin-import -D
2.之后就是在babel.config.js中进行一些vant按需引入的配置
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
}
3.配置完成后就通过创建一个plugins文件夹，在plugins中定义一个vant.js文件用来存放代码
4.在创建好的js文件中首先导入vue，需要哪个vant组件就引入哪个组件，无需在页面里重复引用，通过Vue.use()全局注入。
// 按需全局引入 vant组件
import Vue from 'vue'
import { Button } from 'vant'
Vue.use(Button)
5.最后在main.js导入这个文件夹
import './plugin/vant';
后续。。。