1、多环境开发
这里有个变量NODE_ENV，我们在config/index.js中统一管理。
2、rem适配方案
我们的设计稿都是px值，所以项目中如果需要使用rem单位的话，需要借用工具包来转化下：
这里将使用postcss-pxtorem和lib-flexible来设置rem。
首先是postcss配置：
module.exports = {
plugins:{
// autoprefixer: {
// browsers: ['Android >= 4.0', 'iOS >= 8']
//
},
'postcss-pxtorem': {
// rootValue: 37.5, // Vant 官方根字体大小是 37.5
rootValue({file}) {
return file.indexOf('vant') !== -1 ? 37.5 : 75
},
propList: ['*'],
selectorBlackList: ['.norem'] // 过滤掉.norem-开头的class，不进行rem转换
}
},}
3、Less全局样式
vue h5模板项目的所有全局样式在@src/assets/css中统一设置
但是我们项目模板中引入了VantUI，某些地方需要重置样式。
第一种，不想在某个页面加上scoped，但是又想覆盖该页面的vant样式，就可以在该页面的父容器加上一个class样式，例如：
.xx {
.van-button {}
}
第二种，父组件改变子组件样式 深度选择器
如果子组件使用了scoped，但在父组件又想修改子组件的样式可以通过>>>来实现
<style scoped>
.a >>> .b {}
</style>
第三种，全局变量
vue.config.js配置使用css.loaderOptions选项，注入less的mixin variables到全局，不需要手动引入，这样向所有的less样式传入共享的全局变量：
4、VantUI组件按需加载
使用babel-plugin-import来实现Vant按需引入组件，它是一款babel插件，会在编译过程中将import的写法自动转化为按需引入的方式。
1、安装插件
npm i babel-plugin-import -D
2、在babel.config.js 中设置
但是有一个问题是：在页面使用的时候还是需要引入，所以可以在src/plugins/vant.js中统一管理组件，这样我们就可以需要哪个引入哪个，不需要重复引入了，减少了工作量。
5、Vuex状态管理
首先是状态管理的目录结构
在入口文件main.js中引入
然后是各个页面的使用
<script>
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters(['userName'])
},
methods: {
doDispatch() {
this.$store.dispatch ('setUserName', '111')
}
}
}
</script>
6、Vue-router
我们采用的是路由hash模式
hash模式介绍：这是开发中的默认模式，在url中永远带着#号，在浏览器方面其支持度极佳，并且可以兼容低版本的IE浏览器。
这里我们来说一下前端路由的原理：
window是可以监听到哈希值的变化的，使用onhashchange事件，这就意味着，当url中的哈希值发生了变化，无需发起HTTP请求，window也可以监听到这种变化，并按需加载前端的代码块，哈希模式也是当下单页面应用的标配。所以前端路由的强大之处就是：路由分发不需要服务器来做，前端自己就可以完成。
本项目模板中，我们在router/index.js中配置下：
7、Axios接口封装，接口统一管理
在utils/request.js封装axios，方便开发者可以根据后台接口做修改。
在service.interceptors.request.use中可以设置请求头，例如设置Token
config.hideloading是在api文件夹下的接口参数里设置
service.interceptors.response.use里可以对接口返回数据处理，例如401删除本地信息，重新登录。
统一进行接口管理
在src/api文件夹下统一管理接口
分为url(接口地址，请求的时候会拼接上config下的baseApi)，method(请求方法)，data(请求参数qs.stringify(params)是对数据系列化操作)
8、配置alias别名
在vue.config.js中配置alias别名，省掉根据../../来寻找文件。
9、配置proxy跨域
如果项目中需要跨域设置的话，在vue.config.js proxy注释并且配置相应参数。
10、配置打包分析
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
chainWebpack: config => {
// 打包分析
if (IS_PROD) {
config.plugin('webpack-report').use(BundleAnalyzerPlugin, [
{
analyzerMode: 'static'
}
])
}
}
}
执行npm run build就可以看包的执行情况
11、阿里云构建配置文件
FROM 项目阿里云地址RUN npm install pm2@4.5.0 -gADD . /项目名称WORKDIR /项目名称RUN npm install# 上传OSS的构建RUN HOST=项目阿里云地址/ \PUBLIC_PATH="xxx/" \XXX_ENVIRONMENT=ontest/online \npm run build# 执行OSS上传RUN ACCESSKEY_ID=xxx \ACCESSKEY_SECRET=xxx \PUBLIC_PATH="xxx" \npm run 自定义Node中间件
12、总结一些优化
去掉正式环境的console.log
npm i -D babel-plugin-transform-remove-console
在babel.config.js中配置
// 获取 VUE_APP_ENV 非 NODE_ENV，测试环境依然 console
const IS_PROD = ['production', 'prod'].includes(process.env.VUE_APP_ENV)
const plugins = [
[
'import',
{
libraryName: 'vant',
libraryDirectory: 'es',
style: true
},
'vant'
]
]
// 去除 console.log
if (IS_PROD) {
plugins.push('transform-remove-console')
}
module.exports = {
presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'entry'}]],
plugins
}
Eslint+Pettier统一开发规范
安装eslint prettier vetur插件，.vue文件使用vetur进行格式化，使用prettier
代码中在文件.prettierrc里写属于各自项目的pettier规则：
