- 安装依赖:
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.js const state = { username: '' } const mutations = { SET_USERNAME: (state, username) => { state.username = username } } const actions = { getUsername ({ commit }, username) { commit('SET_USERNAME', username) } } export default { namespaced: true, state, mutations, actions } // 页面(组件)中使用 import { mapState, mapActions } from 'vuex' export default { 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