Vue开发规范

style需要声明scoped

<style scoped>
.qq-group-img{
  display: block;
  margin: 0 auto;
  width: 240px;
}
</style>

Name字段，需使用大驼峰

<script>
export default {
  name: 'HelloWorld'
}
</script>

props字段必须声明类型与默认值

export default {
  name: 'App',
  props: {
    name: {
      type: String,
      default: 'suo'
    }
  }
}

vue组件声明，components、props、data需写在最上边

export default {
  name: 'App',
  components: {
    ...
  },
  props: {
    ...
  },
  data () {
    return {
      ...
    }
  }
}

页面级组件需要放置views目录下

多页面应用，页面放置pages目录下

公共组件设计必须考虑重用，不得直接传递后台返回的Object，拆分为基础数据类型

  <Movie
    v-for="(item,index) in list"
    :index='index'
    :key='item.id'
    :name='item.resourceName'
    :poster='item.poster'
    :price='item.productPrice'
    @selected='doSelectMovie' />

v-for与v-if不可同时使用，此类情况，请使用computed

<!-- bad -->
  <Movie
    v-for="(item,index) in list"
    v-if="item.id > 1"
    :index='index'
    :key='item.id'
    :name='item.resourceName'
    :poster='item.poster'
    :price='item.productPrice'
    @selected='doSelectMovie' />

组件相关资源，使用就近原则，存放在组件目录下

v-bind与v-on使用缩写

// good
<Movie
  :name='item.resourceName'
  :poster='item.poster'
  @selected='doSelectMovie' />

// bad
<Movie
  v-bind:name='item.resourceName'
  v-bind:poster='item.poster'
  v-on:selected='doSelectMovie' />

使用mapGetters、mapMutations、mapActions

组件命名不能重复

ref的定义和使用时，遵循小驼峰命名

<template>
  <ShowInfo ref='showInfo' />
</template>
<script>
  this.$refs.showInfo
</script>

路径使用别名

import PasteEditor from '_c/paste-editor'
import { getTableDataFromArray } from '@/libs/util'

mutations全部使用大写

  mutations: {
    CONCAT_ROUTES(state, routerList) {
      state.routers = routerList.concat(routes)
      state.hasGetRules = true
    }
  }

← 代码风格