vue项目架构优化

2019-10-01 本文已影响0人 Johnson23

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 模板复用