基于VUE全家桶搭建移动端框架

技术选型背景：公司初级前端人员较多，不适宜使用react框架，故选择了vue脚手架

技术栈：vue-cli 3.0.0 vuex vant axios mock vconsole

---

vant-ui传送门，引入方式选择方式一，有赞技术团队推荐，原因：较方法二简单方便，较方法三无需全局挂载，减少内存消耗，及打包后项目较小

axios: 一个基于 promise 的 HTTP 库,个人习惯将其defaults熟悉结合webpack,整合成公共配置模块，用于开发、测试、生产环境，无需多次修改

mock：生成随机数据，拦截ajax请求，模拟后端数据，可预防后端接口进度影响项目展示，需要注意一点get query请求，使用mock时需要用正则匹配对应的路由，才可实现对应的数据拦截。

vconsole:移动端真机调试神器。

项目结构：

_assets:资源文件目录 存放js、css、img等文件

_components:组件目录 用于存储公共组件、可复用性组件

_configs:配置文件目录,存放axios、rem、wx、file资源等配置

_restfulApi:接口请求目录

_router:路由配置文件目录

_store:状态管理目录

     _mutations:同步状态管理目录

     _actions:异步状态管理目录

_utils:基础方法类封装

_view:视图层

项目结构及axios拦截处理 微信支付配置模块

注:微信JSSDK使用前需要先进行初始化，可配置在vuex上，需要注意的是VUEX刷新页面时会存在数据丢失现象，可将数据保存在sessionStorage中，关闭页面时，销毁对应的数据。

整合Vant

踩了个小坑，直接components，对应的组件Button时失败，提示没找到对应的选项

components: {[Button.name]: Button}

DEMO

传送门：刚玩简书没设置好格式，哭晕= =

---

(因前期使用mint-ui，现更新为vant-ui，暂时不放出git链接，整合后补上……)