Vue 编码指南

# Vue 规范

# Vue 官方文档: 风格指南 — Vue.js (opens new window)

# Vue.js 组件编码规范: 中文 - docs (opens new window)

团队风格以官方为主

# 项目 src 目录结构

📦src
 ┣ 📂api 接口
 ┃ ┣ 📜index.js
 ┣ 📂assets 静态资源
 ┃ ┣ 📂iconfont
 ┃ ┃ ┣ 📜iconfont.css
 ┃ ┗ 📂images
 ┃ ┃ ┣ 📜index.jpg
 ┣ 📂components 组件, 一般放置公共组件和每个页面里的子组件
 ┃ ┣ 📂Home Home 页面的子组件
 ┃ ┃ ┣ 📜index.vue 只有一个子组件, 组件名为 index
 ┃ ┣ 📂Projects Projects 页面的子组件
 ┃ ┃ ┣ 📜ProjectsList.vue 多个子组件, 组件名以父组件名开头
 ┃ ┃ ┣ 📜ProjectsSearch.vue
 ┃ ┣ 📂Plugins 公共组件
 ┃ ┃ ┣ index.vue
 ┃ ┃ ┗ index.js
 ┃ ┗ index.vue
 ┣ 📂router 路由
 ┃ ┣ 📜index.js
 ┣ 📂store
 ┃ ┣ 📜actions.js
 ┃ ┣ 📜index.js
 ┃ ┣ 📜mutation-types.js
 ┃ ┗ 📜mutations.js
 ┣ 📂styles 样式
 ┃ ┣ 📜index.less
 ┃ ┣ 📜reset.less
 ┣ 📂utils 工具方法
 ┃ ┣ 📜index.js
 ┣ 📂views 页面
 ┃ ┣ 📂Projects
 ┃ ┃ ┣ 📜index.vue
 ┃ ┣ 📜Home.vue Home 页面
 ┃ ┣ 📜Index.vue 主页面
 ┣ 📜App.vue
 ┗ 📜main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

注:

由于 Vue 官方规定单文件组件的文件名以单词大写开头 (PascalCase), 为了统一, 故团队规定组件的文件夹名称也以单词大写开头
当一个文件夹下只有一个 js 或 vue 文件, 该文件名称为 index, 方便引入. 具体参考 Vue 中 import from 的来源：省略后缀与加载文件夹 (opens new window). 要注意 .js 的优先级大于 .vue

# Vue 文件

以 ProjectsList.vue 组件为例:

<template>
  <!-- class 为组件名的 kebab 形式, 即以中划线分割的单词组 -->
  <div class="projects-list">
    <scroller>
      <group>
        <cell>
          <!-- 组件名统一使用 kebab 形式 -->
          <number-input></number-input>
        </cell>
      </group>
    </scroller>
  </div>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13

<script>
// 首先引入 'vuex'
import { mapState, mapGetters, mapActions } from 'vuex'
// 先引入自己的组件, 根据组件出现在页面的位置从上到下依次引入
import Scroller from '@components/Scroller'
import NumberInput from '@components/NumberInput'
// 再引入 UI 组件
import { Group, Cell } from 'vux'
// 引入 mixins
import mixins from '@components/mixins'
// 组件的选项统一使用以下顺序
export default {
  // 为防止 name 重复, 统一设置为组件名
  name: 'ProjectsList',
  // 组件注册顺序和引入顺序保持统一
  components: {
    Scroller,
    NumberInput,
    Group,
    Cell
  },
  mixins: [mixins],
  // props 最好包含类型检查和默认值; 默认值如果为对象, 必须使用 return 返回
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  // data 定义变量的顺序根据出现在页面的位置从上到下依次定义
  data() {
    return {
      projectsList: []
    }
  },
  // computed 优先计算 'vuex'
  computed: {
    ...mapState(['projectId']),
    ...mapGetters(['isOffline']),
    disabled() {
      return !projectsList.length
    }
  },
  watch: {
    list() {
      this.init()
    }
  },
  methods: {
    // 方法中最好有一个 init, 来执行页面初始化的所有函数
    init() {
      this.fetchProjectList()
    },
    // 方法顺序也是根据出现在页面的位置从上到下依次写入
    // 如果页面是 增删改查, 按照: 查--增--改--删 的顺序写入
    fetchProjectList() {},
    addProject(){},
    editProject(){},
    deleteProject(){},
    // format 类型的函数最后写入
    formatProject(){},
  },
  created() {},
  mounted() {
    this.init()
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

<style lang="less">
/*
  * css 不推荐通过添加 scope 来防止样式冲突(使用 scope 会导致无法覆盖某些 ui 组件库样式)
  * 而使用一个大类包裹当前页面所有样式来防止样式冲突
  * 当然必须保证这个大类在该项目中的唯一性
  * 最保险的办法就是同时使用特定前缀和组件名
  * 比如 page-projects-list, page 这个前缀只有组件的大类才可以使用
  */
.projects-list {
  width: 100%;
}
</style>