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