vuex使用规范
- 把数据放在状态管理（store）里面
数据和视图完全分离。数据逻辑放在store处理，用户交互放在.vue文件处理。
一般而言，ajax请求和数据字典使用vuex来管理，而单个组件的状态则不必要：
<div v-if="isShow">Hello world</div>
//...所有的数据变化通过mutation改变，方便定位跟踪Bug。
data（）{
return {
isShow: false
}
}
- 使用单向数据流
使用vuex管理的数据，在数据变化时通过mutation改变，方便定位跟踪Bug。
用“Vuex 的思维”去实现v-model的双向绑定效果：给 <input> 中绑定 value，然后侦听 input 或者 change 事件，在事件回调中调用 action:
<input :value="message" @input="updateMessage">
// ...
computed: {
...mapState({
message: state => state.obj.message
})
},
methods: {
updateMessage (e) {
this.$store.commit('updateMessage', e.target.value)
}
}
// ...
mutations: {
updateMessage (state, message) {
state.obj.message = message
}
}
双向绑定的计算属性
<input v-model="message">
// ...
computed: {
message: {
get () {
return this.$store.state.obj.message
},
set (value) {
this.$store.commit('updateMessage', value)
}
}
}
- 父子组件通过
props传递数据
子组件数据源通过父组件传递，虽然增加了耦合，但组件之间的层级关系更明显，代码逻辑也更清晰明了。
组件式开发
- 提取复用组件
- 单个
.vue文件超过2000行时，可酌情分出子组件，使得代码结构清晰，提高可读性。子组件拆分原则：尽量不涉及交互，做纯展示组件，不污染父组件代码逻辑。 - 使用minix
注意组件式开发目的不是要把一个文件分成多个组件去开发，因为这样需要关注组件间通信的问题，导致写代码思路不流畅；而是尽可能的提取可复用组件。
统一eslint规范
- 使得代码风格统一，避免多人协作代码冲突
code review
- 分支管理
每个功能点建开发分支，开发测试通过之后再提pr到主分支。- 每个人都fork代码要本地仓库
- 开发具体模块功能时，安排一个人的在本地仓库以主库sit分支checkout一个单独的分支，其他协作者跟踪该分支进行开发，联调和自测。测试通过后，由该人提交pr到主库sit分支，测试人员再测试一遍。
跟踪他人本地仓库git命令：
// 添加远程仓库
git remote add upstream git@10.8.200.151:bmom-front/bmom-backend-web.git
// 拉取远程仓库的代码及分支
git fetch upstream
// checkout 远程分支
git checkout -b upstream/branch
- 代码review
提pr合到主分支需要code review来保证代码质量
环境变量管理
通过cross-env来管理不同环境的变量，可查看官方文档。
.env # loaded in all cases
.env.local # loaded in all cases, ignored by git
.env.[mode] # only loaded in specified mode
.env.[mode].local # only loaded in specified mode, ignored by git
优先级：.local > .[mode] > .env
.env文件可以简单的以key=value的方式定义变量：
NODE_ENV=production
VUE_APP_TITLE=My App (staging)
执行命令：
vue-cli-service build --mode development // 会读取.env .env.development .env.development.local
目录结构（src）
├── App.vue
├── main.js
├── assets
│ └── ... # 静态资源
├── styles
│ └── ... # 样式文件
├── api
│ └── ... # 抽取出API请求
├── components
│ ├── App.vue
│ └── ...
├── views
│ └── ... # 页面
├── utils
│ └── ... # 公共js
└── store
├── index.js # 我们组装模块并导出 store 的地方
├── actions.js # 根级别的 action
├── mutations.js # 根级别的 mutation
└── modules
├── cart.js # 购物车模块
└── products.js # 产品模块
路由（vue-router）
前端路由的两种模式：hash和history
- hash
会影响锚点功能；
不美观； - history（建议使用）
需要后端配置
接口管理工具
推荐yapi
vue 生态
- Portal-Vue 模板复用
