Vue 编码基础

组件规范

1) 组件名为多个单词。
组件名应该始终是多个单词组成（大于等于 2），且命名规范为KebabCase格式。
这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML元素名称都是单个单词的。

  1. // 正确示例：
  2. export default {
  3.     name: 'TodoItem'
  4. // ...
  5. };
  6. // 错误示例：
  7. export default {
  8.     name: 'Todo',
  9. // ...
  10. }
  11. export default {
  12.     name: 'todo-item',
  13. // ...
  14. }

_
2) 和父组件紧密耦合的子组件应该以父组件名作为前缀命名

  1. 正确示例：
  2. components/
  3. |- todo-list.vue
  4. |- todo-list-item.vue
  5. |- todo-list-item-button.vue
  6. |- user-profile-options.vue （完整单词）
  8. 错误示例：
  9. components/
  10. |- TodoList.vue
  11. |- TodoItem.vue
  12. |- TodoButton.vue
  13. |- UProfOpts.vue （使用了缩写）

3) 在 Template 模版中使用组件，应使用 PascalCase 模式，并且使用自闭合组件。

  1. 正确示例：
  2. <!-- 在单文件组件、字符串模板和 JSX 中 -->
  3. <MyComponent />
  4. <Row><table :column="data"/></Row>
  6. 错误示例：
  7. <my-component /> <row><table :column="data" /></row>

4) Prop 定义应该尽量详细

  • 必须使用 camelCase 驼峰命名
  • 必须指定类型
  • 必须加上注释，表明其含义
  • 必须加上 required 或者 default，两者二选其一
  • 如果有业务需要，必须加上 validator 验证
    1. // 正确示例：
    2. props: {
    3.       // 组件状态，用于控制组件的颜色
    4.   status: {
    5.       type: String,
    6.       required: true,
    7.       validator: function (value) {
    8.           return ['succ','info','error'].indexOf(value) !== -1
    9.       }
    10.    },
    11.    // 用户级别，用于显示皇冠个数
    12.   userLevel: {
    13.     type: String,
    14.     required: true
    15.   },
    16. },
    _
    5) 为组件样式设置作用域 ```vue
<a name="LiM5K"></a> ### 模板中使用简单的表达式 组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。复杂表达式会让你的模板变得不那么声明式。我们应该尽量描述应该出现的是什么，而非如何计算那个值。而且计算属性和方法使得代码可以重用。vue // 复杂表达式已经移入一个计算属性 computed: { normalizedFullName: function () { return this.fullName.split(‘ ‘).map(function (word) { return word[0].toUpperCase() + word.slice(1) }).join(‘ ‘) } } 
  1. <a name="pcZqC"></a>
  2. ### 指令都使用缩写形式
  3. 指令推荐都使用缩写形式，(用 : 表示 v-bind: 、用 \@ 表示 v-on: 和用 # 表示v-slot:)
  4. ```html
  5. <!-- 正确示例：-->
  6. <input @input="onInput"  @focus="onFocus" >
  8. <!-- 错误示例：-->
  9. <input v-on:input="onInput" @focus="onFocus">

必须为 v-for 设置键值 key

v-for指令和v-if不允许绑定在同一个元素上，如果需要在computed里面对数据进行处理。

单文件模板(script 标签内部结构顺序)

  1. <template>
  2.     <div class=""></div>
  3. </template>
  4. <script>
  5. export default {
  6.     components: {},
  7.     data() {
  8.         return {
  9.         };
  10.     },
  11.     computed: {},
  12.     watch: {},
  13.     methods: {},
  14.     beforeCreate() {},
  15.     created() {},
  16.     beforeMount() {},
  17.     mounted() {},
  18.     beforeUpdate() {},
  19.     updated() {},
  20.     beforeDestroy() {},
  21.     destroyed() {},
  22.     activated() {},
  23. }
  24. </script>
  25. <style lang='less' scoped>
  26. //@import url(); 引入公共css类
  27. </style>

Vue Router 规范

1) 页面跳转数据传递使用路由参数
页面跳转，例如 A 页面跳转到 B 页面，需要将 A 页面的数据传递到 B 页面，推荐使用路由参数进行传参，而不是将需要传递的数据保存 vuex，然后在 B 页面取出 vuex的数据，因为如果在 B 页面刷新会导致 vuex 数据丢失，导致 B 页面无法正常显示数据。

  1. // 正确示例：
  2. let id = ' 123';
  3. this.$router.push({ name: 'userCenter', query: { id: id } });

_
2) router 中的命名规范

  • path命名规范采用kebab-case命名规范（vue文件的目录结构保持一致，因为目录、文件名都是kebab-case，这样很方便找到对应的文件）
  • name命名规范采用KebabCase命名规范且和component组件名保持一致！（因为要保持keep-alive特性，keep-alive按照component的name进行缓存，所以两者必须高度保持一致）

注意：path除了采用kebab-case命名规范以外，必须以 / 开头，即使是children里的path也要以 / 开头。
经常有这样的场景：某个页面有问题，要立刻找到这个vue文件，如果不用以/开头，path为parent和children组成的，可能经常需要在router文件里搜索多次才能找到，而如果以/开头，则能立刻搜索到对应的组件

  2. {
  3.     path: '/file',
  4.     name: 'File',
  5.     component: Main,
  6.     meta: {
  7.         title: '文件服务',
  8.         icon: 'ios-cloud-upload'
  9.         },
  10.     children: [
  11.       {
  12.         path: '/file/file-list',
  13.         name: 'FileList',
  14.         component: () =  > import('@/views/file/file-list.vue')
  15.       },
  16.       {
  17.         path: '/file/file-add',
  18.         name: 'FileAdd',
  19.         component: () =  > import('@/views/file/file-add.vue')
  20.       },
  21.       {
  22.         path: '/file/file-update',
  23.         name: 'FileUpdate',
  24.         component: () =  > import('@/views/file/file-update.vue')
  25.       }
  26.     ]
  27. }

Vue 项目目录规范

基础

vue 项目中的所有命名尽量要与后端命名统一。
比如权限：后端 privilege, 前端无论 router , store, api 等都使用 privielege单词！

目录说明

目录名按照上面的命名规范，其中 components 组件用大写驼峰，其余除 components 组件目录外的所有目录均使用 kebab-case 命名。

  1. ├── public
  2. │ └── logo.png # LOGO
  3. │ └── index.html # Vue 入口模板
  4. ├── src
  5. │ ├── api # Api ajax 等
  6. │ ├── └── module #业务逻辑api
  7. │ ├────── index #
  8. │ ├── assets # 本地静态资源
  9. │ ├── config # 项目基础配置，包含路由，全局设置
  10. │ ├── components # 业务通用组件
  11. │ ├── core # 项目引导, 全局配置初始化，依赖包引入等
  12. │ ├── router # Vue-Router
  13. │ ├── store # Vuex
  14. │ ├── utils # 工具库
  15. │ ├── locales # 国际化资源
  16. │ ├── views # 业务页面入口和常用模板
  17. │ ├────── basic-data #基础数据
  18. │ ├────── analysis-query #分析查询
  19. │ ├────── decision-support#决策支持
  20. │ ├────── my # 我的
  21. │ ├────── ├── my-index # 我的-首页
  22. │ ├───────────── └── my-wallet # 我的-钱包
  23. │ ├────────────────── ├── modules # 页面子组件（非必要）
  24. │ ├───────────────────└── index.vue # 页面主体
  25. │ ├── App.vue # Vue 模板入口
  26. │ └── main.js # Vue 入口 JS
  27. │ └── permission.js # 路由守卫(路由权限控制)
  28. │ └── global.less # 全局样式
  29. ├── tests # 测试工具
  30. ├── README.md
  31. └── package.json

1) api 目录

  • 文件、变量命名要与后端保持一致。
  • 此目录对应后端 API 接口，按照后端一个 controller 一个 api js 文件。若项目较大时，可以按照业务划分子目录，并与后端保持一致。
  • api 中的方法名字要与后端 api url 尽量保持语义高度一致性。

  • 对于 api 中的每个方法要添加注释，注释与后端 swagger 文档保持一致。

    1. // 正确示例：
    2. // 后端 url： EmployeeController.java
    3. /employee/add
    4. /employee/delete/{id}
    5. /employee/update
    6. //前端： employee.js
    7. // 添加员工
    8. addEmployee: (data) => {
    9. return postAxios('/employee/add', data)
    10. },
    11. // 更新员工信息
    12. updateEmployee: (data) => {
    13. return postAxios('/employee/update', data)
    14. },
    15. // 删除员工
    16. deleteEmployee: (employeeId) => {
    17. return postAxios('/employee/delete/' + employeeId)
    18. },

    2) components 目录

    此目录应按照组件进行目录划分，目录命名为 KebabCase，组件命名规则也为 KebabCase

    1. |components
    2. |-- error-log
    3. | |-- index.vue
    4. | |-- index.less
    5. |-- markdown-editor
    6. | |-- index.vue
    7. | |-- index.js
    8. |-- kebab-case

    3) router 与 store 目录

    这两个目录一定要将业务进行拆分，不能放到一个 js 文件里。
    router 尽量按照 views 中的结构保持一致
    store 按照业务进行拆分不同的 js 文件

    其他

  • 1) 尽量不要手动操作 DOM

因使用 vue 框架，所以在项目开发中尽量使用 vue 的数据驱动更新DOM，尽量（不到万不得已）不要手动操作 DOM，包括：增删改 dom元素、以及更改样式、添加事件等。

  • 2) 删除无用代码

因使用了 git/svn 等代码版本工具，对于无用代码必须及时删除，例如：一些调试的console 语句、无用的弃用功能代码。

  • 3）依赖引入

不要因为一个很小的功能引入巨型依赖，自己可实现的功能可以手动封装，引入依赖若可按需加载使用按需加载的方式，例如echart.js不要整体引入，只需引入自己需要的图表

  • 4）版本管理工具

统一使用yarn替代npm进行版本管理，yarn.lock锁不要轻易删除