您的当前位置:首页正文

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

来源:花图问答

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

技术栈:vue-cli 3.0.0 vuex vant axios 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链接,整合后补上……)