技术选型背景:公司初级前端人员较多,不适宜使用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链接,整合后补上……)