概述
-
基础环境:
-
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
如果有帮助到您,厚着脸皮希望给个小星星