自适应-手机端

概述基础环境：Node.js最新稳定版Vue2.xVueCli3开发：跟普通的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如果有帮助到您，厚着脸皮希望给个小星星 ...