- 安装依赖:
npm install - 运行开发:
npm run serve - 打包上线:
npm run build - 规范检查:
npm run lint
- Vant组件库 文档
- 使用 CSS 预处理语言 —— Less
- 注意:项目使用
Rem 适配,参考 Vant 组件库 文档中 【快速上手 -> 进阶用法】章节进行配置
axios:基于 promise 的 HTTP 库。better-scroll:解决移动端、PC端各种滚动场景需求。- BetterScroll 2.x 文档
- 注:
better-scroll使用版本为2.x。上拉刷新(pullup)、下拉加载(pulldown)等以插件的形式引入
dayjs:轻量的处理时间和日期的 JavaScript 库
- Vant 风格指南
router编写约定- 对不同模块的路由进行拆分,分别写入对应模块中
Vuex编写约定对
Vuex进行模块化拆分,并设置命名空间namespaced: true统一使用
Action通过Mutation来修改State的数据// moduleA.jsconststate={username: ''}constmutations={SET_USERNAME: (state,username)=>{state.username=username}}constactions={getUsername({ commit },username){commit('SET_USERNAME',username)}}exportdefault{namespaced: true, state, mutations, actions }// 页面(组件)中使用import{mapState,mapActions}from'vuex'exportdefault{computed: { ...mapState({username: state=>state.moduleA.username// moduleA中的state})},methods: { ...mapActions({getUsername: 'moduleA/getUsername'// moduleA中的Actions})}}
src | --- api - api | --- components - 公用组件 | --- router - 路由 | | --- modules - 路由模块 | | --- index.js - 路由入口文件 | --- store - vuex状态管理 | | --- modules - vuex模块 | | --- index.js - vuex入口文件 | --- utils - 工具集 | | --- request.js - 请求封装 | --- views - 视图 | --- App.vue | --- main.js