共计 2451 个字符，预计需要花费 7 分钟才能阅读完成。
概述
基础环境：
Node.js 最新稳定版
Vue2.x
VueCli3
开发：跟普通的 vue 单页应用开发方式一致。
npm i // 安装依赖
npm run serve // 启动开发环境
npm run build// 打包
调试：
开发环境下，可以借助 chrome 进行调试，需要注意的是, 如果涉及到微信验证的接口，要手动在 sessionStorage 中注入 wx_info 类似的验证，具体的 wx_info 配置可以询问后端开发人员
如果要进行真实账号测试或者是生产环境下，可以通过微信开发者工具进行调试，调试方式跟 chrome 类似。
vuex 的调试，请先科学上网，然后在 chrome 拓展工具里搜索安装 Vue.js devtools，安装完成后打开开发者工具，在最右侧 vue 栏里进行 vuex 调试。
具体使用
路由管理
采用树形结构管理路由
每一个大模块单独设置一个路由，再汇总到总路由文件
const Demo=() => import(/* webpackChunkName: “demo-page” */ ‘@views/demo/index’)
const DemoDetail =() => import(/* webpackChunkName: “demo-page” */ ‘@views/demo/detail/index’)
const DEMO_ROUTERS =[
{
path: ‘/demo’,
name: ‘ 订单 1 ’,
component: Demo,
meta: {requireAuth: false,index:1},
},
{
path: ‘/detail’,
name: ‘ 订单详情 ’,
component: DemoDetail,
meta: {requireAuth: false,index:2},
},
]
export default DEMO_ROUTERS
如果该模块较为复杂，页面很多，可以视情况再细分路由。
结合 Vue 的异步组件和 Webpack 的代码分割功能，实现路由组件的懒加载
serve 管理
serve 下的 base.js 用于全局配置 api 请求的域名或者 ip 地址等可以快速的切换测试环境和生产环境
const base = {
dv:’http://test’, // 测试环境
pr: ‘http://prodect’, // 生产环境
mock:’ https://easy-mock.com/mock/5cb4762ae14be30f81aee1a6/mock’ // mock 环境
}
export default base;
推荐一个好用的在线生成前端 mock 数据的网站，easy-mock 注册后把 mock 这边的地址改成你的 mock 地址即可对接 mock 接口
get(url, params) {
return new Promise((resolve, reject) => {
axios({
method: ‘get’,
url: url,
params: params
}).then(res => {
// console.log(res);
if (res.data.errCode !== 0) Toast.failed(res.data.errMsg);
else resolve(res.data);
}, err => {
reject(err);
Toast.failed(err.message);
});
});
},
此处的 errMsg 是我自己配的 mock 接口状态码，请根据自己的项目自行更改, 如果不希望在全局使用 toast 把此处的 toast 注释掉即可
serve 下的 http.js 用于封装 axios 如果是微信公众号的项目，需要 token 验证, 在此处配置 token 的获取，并且添加到请求头
数据管理
简单项目无需使用 vuex, 反而加重项目
数据交互较多，难以管理时，使用 vuex 提高效率按照 store 下的 demo 这个 module 作为参考，分模块编写。
已经集成了 vuex 数据持久化插件，默认为所有 state 数据都存入 session 如果要更改存储位置，或者希望局部存入，自行修改 plugin 配置，配置方法 vuex-persistedstate
自适应方案（rem+vw）
参考凹凸实验室发表一篇的布局方案 利用视口单位实现适配布局
在 static/style/global 下配置
// 主题色配置
$theme-color:#4fc08d;
// rem 单位换算：定为 75px 只是方便运算，750px-75px、640-64px、1080px-108px，如此类推
$vw_fontsize: 75; // iPhone 6 尺寸的根元素大小基准值
@function rem($px) {
@return ($px / $vw_fontsize) * 1rem;
}
// 根元素大小使用 vw 单位
$vw_design: 750;
html {
font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw;
// 同时，通过 Media Queries 限制根元素最大最小值
@media screen and (max-width: 300px) {
font-size: 64px;
}
@media screen and (min-width: 750px) {
font-size: 108px;
}
}
// body 也增加最大最小宽度限制，避免默认 100% 宽度的 block 元素跟随 body 而过大过小
body {
max-width: 750px;
min-width: 300px;
}
默认配置以 750 作为设计稿基准
同时可以配置最大最小适配范围
上述功能都集成在 view/demo 项目里, 可以参考 demo 具体了解
开发优化
alias：在 vue.config 查看 alias 路径，自行添加或者修改
mixins: 已经全局配置，在 static 下的 mixin 进行样式函数的编写
用户体验
使用路由懒加载，提高加载速度
全局动态配置了路由切换动画，为了正确显示切换动画，在配置路由时一定要写明路由层级，切换动画时会根据层级比较作为判断
结语
没啥干货，权当服务一下前端初学者和伸手党，同时把自己不成熟的框架拿出来供大家检阅，发现不足之处。
项目地址
Github
如果有帮助到您，厚着脸皮希望给个小星星
