常用的业务组件
这是我为公司搭建的一套移动端 vue 项目架构, 推荐给大家, 让每个 VUE 新手都能轻松用 VUE 开发移动端项目
特点:
1. 集成了 80% 以上常用的移动端组件库, 使用方式: 比如 button 就可以直接 < rkhy-button></rkhy-button > 无须手动引用, 详细参数配置请看 packages 里每个组件里的 src 文件价里的. vue 文件详细示例请启动后到 localhost:9018/test 下面查看
2. 对 axios 进行了二次封装, 在请求接口时做了拦截, 自动加载接口请求状态, 比如正在加载的转菊花, 以及接口报错自动弹出小弹框错误提示等
3. 移动端的 rem 单位初始化样式, 比如设计稿上是文字大小是 36px, 可以直接使用 font-size:rem(36); 自动会把 PX 转成 REM
4. 清晰的业务模块划分, 便于管理和多人协做所有的业务模块请放在 router 里, 然后手动配置一下路由, 路由配置最好用我写的示例, 比如 test 组件就 const test = r => require.ensure([], () => r(require('./test'))), 这样可以使用 webpack 的分包加载
5. 清晰的 store 架构, 便于管理和多人协做每个业务模块的状态管理都放在 modules 文件夹下面 (一个业务模块对应一个文件),aticon 类型都放在 actionType 文件夹下面 (一个业务模块对应一个), 请求接口配置放在 constants 文件夹里 (一个模块对应一个)
这里有两个 components 文件夹, 建议外面的 components 文件夹放一些通用的业务组件, router 下面的每个业务模块的 components 文件夹放当前业务模块自己使用业务组件
该架构可能需要有一定 VUE 开发基础的人才能理解我里面有个 test 实例, 可以作为参考
下载后 npm install 安装所有的类库, 就可以启动
[color=#ff0000] 下载地址: https://github.com/weiyou789/vue-wap[/color]
来源: http://www.qdfuns.com/article/11403/5d71ad8b40d3f42d4fba513d9353fd18.html