Vue开发规范 - LSY小窝

12月

本文最后更新于2023年12月27日，已经过了287天没有更新，若内容或图片失效，请留言反馈

规范目的

提高协作效率，便于后期的维护和优化

命名规范

普通变量命名

命名方法: 驼峰命名法

命名规范

命名必须是跟需求的内容相关的词，需要见名知意。如：
JavaScript 代码:
```
let mySchool = "我的学校"
```
命名是复数的时候需要加s,比如说我想申明一个数组，表示很多人的名字，那么我们可以这样定义
JavaScript 代码:
```
let names = new Array();
```

常量

命名方法: 所有字母全部大写

命名规范

由大写字母和下划线组合，单词之间用下划线分割

JavaScript 代码:

   const MAX_AGE = 99;

组件命名规范

官方文档推荐及使用遵循规则：

PascalCase (单词首字母大写命名)是最通用的声明约定
kebab-case (短横线分隔命名) 是最通用的使用约定

组件名应该始终是多个单词的，根组件 App 除外
有意义的名词、简短、具有可读性
命名遵循 PascalCase 约定
- 公用组件以 Abcd (公司名缩写简称) 开头，如（AbcdDatePicker,AbcdTable）
- 页面内部组件以组件模块名简写为开头，Item 为结尾，如（FormItem，SideBarItem）
使用遵循 kebab-case 约定
- 在页面中使用组件需要前后闭合，并以短线分隔，如（，）
导入及注册组件时，遵循 PascalCase 约定，如：import ElTable from ...
同时还需要注意：必须符合自定义元素规范: 切勿使用保留字

method 方法命名命名规范

驼峰式命名，统一使用动词或者动词+名词形式

JavaScript 代码:

   // bad
   deleted、edit、show
   // good
   jumpPage、openUserInfoDialog

请求数据方法，以 data 结尾

JavaScript 代码:

   // bad
   getList、postForm
   // good
   getListData、postFormData

init、refresh 单词除外
尽量使用常用单词开头（set、get、go、can、has、is）

views 下的文件命名

只有一个文件的情况下不会出现文件夹，而是直接放在 views 目录下面，如 index.vue
尽量是名词,且使用驼峰命名法
开头的单词就是所属模块名字（workbenchIndex、workbenchList、workbenchEdit）
名字至少两个单词（good: workbenchIndex）（bad: workbench）

props 命名

在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板中应该始终使用 kebab-case
需要为每个props属性指定默认值defalut

JavaScript 代码:

    // 声明
    const props = defineProps({
      textColor: {
        type: String,
        default: #000000
      }
    })

    // 使用
   <hello-world :text-color="#FF0000"></hello-world>

结构化规范

目录文件夹及子文件规范

全局文件文件均以 index.js 导出，并在 main.js 中导入

JavaScript 代码:

src                                  源码目录
|-- api                              接口，统一管理
|-- assets                           静态资源，统一管理
|-- components                       公用组件，全局文件
|-- filters                          过滤器，全局工具
|-- icons                            图标，全局资源
|-- datas                            模拟数据，临时存放
|-- lib                              外部引用的插件存放及修改文件
|-- mock                             模拟接口，临时存放
|-- router                           路由，统一管理
|   |-- index.js                     router全局文件
|-- store                            vuex, 统一管理
|   |-- index.js                     vuex全局文件
|-- views                            视图目录
|   |-- staffWorkbench               视图模块名
|   |-- |-- staffWorkbench.vue       模块入口页面
|   |-- |-- indexComponents          模块页面级组件文件夹
|   |-- |-- components               模块通用组件文件夹

多个特性的元素规范

多个特性的元素应该分多行撰写，每个特性一行。(增强更易读)
原生属性放前面，指令放后面

JavaScript 代码:

    <img
      src="https://vuejs.org/images/logo.png"
      alt="Vue Logo"
      v-if="isImgShow"
      @click="updateImg"
    >

注释规范

代码注释在一个项目的后期维护中显的尤为重要，所以我们要为每一个被复用的组件编写组件使用说明，为组件中每一个方法编写方法说明

务必添加注释列表

公共组件使用说明
各组件中重要函数或者类说明
复杂的业务逻辑处理说明
特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的 hack、使用了某种算法或思路等需要进行注释描述
多重 if 判断语句
注释块必须以/（至少两个星号）开头/
单行注释使用//

单行注释

注释单独一行，不要在代码后的同一行内加注释注释符号‘//’ 后隔一个空格开始写

JavaScript 代码:

    // 姓名
    let name = '张三'

多行注释

JavaScript 代码:

    /**
      * 组件名称
      * @module 组件存放位置
      * @desc 组件描述
      * @author 组件作者
      * @date 2017年12月05日17:22:43
      * @param {Object} [title]    - 参数说明
      * @param {String} [columns] - 参数说明
      * @example 调用示例
      *  <hbTable :title="title" :columns="columns" :tableData="tableData"></hbTable>
      **/

编码规范

优秀的项目源码，即使是多人开发，看代码也如出一人之手。统一的编码规范，可使代码更易于阅读，易于理解，易于维护。尽量按照 ESLint 格式要求编写代码

源码风格

使用 ES6 风格编码

定义变量使用 let ,定义常量使用 const
静态字符串一律使用单引号，动态字符串使用反引号

JavaScript 代码:

    let studentName = '张三'
    let studentName  = `${a}张三`
    let studengAge = 18
    const STUDENT_ID = 'xxxxxxxxxxxxxxxxxx'

数组成员对变量赋值时，优先使用解构赋值

JavaScript 代码:

  // 数组解构赋值
  const arr = [1, 2, 3, 4]
  const [first, second] = arr

函数的参数如果是对象的成员，优先使用解构赋值

JavaScript 代码:

  // 对象解构赋值
  function getFullName({ firstName, lastName }) {}

使用扩展运算符（...）拷贝数组

JavaScript 代码:

   const items = [1, 2, 3, 4, 5]

   // copy
   const itemsCopy = [...items]

需要使用函数表达式的场合，尽量用箭头函数代替。因为这样更简洁，而且绑定了 this

JavaScript 代码:

  // bad
  const self = this;
  const boundMethod = function(...params) {
    return method.apply(self, params);
  }

  // acceptable
  const boundMethod = method.bind(this);

  // best
  const boundMethod = (...params) => method.apply(this, params);

模块
- 如果模块只有一个输出值，就使用 export default，如果模块有多个输出值，就不使用 export default，export default 与普通的 export 不要同时使用
- 如果模块默认输出一个函数，函数名的首字母应该小写
- 如果模块默认输出一个对象，对象名的首字母应该大写

指令规范

指令有缩写一律采用缩写形式

JavaScript 代码:

   :class="{'show-left'：true}"
   @click="getListData"

v-for 循环必须加上 key 属性，在整个 for 循环中 key 需要唯一且尽量不要使用index

JavaScript 代码:

   <ul>
     <li v-for="todo in todos" :key="todo.id">
       {{ todo.text }}
     </li>
   </ul>

避免 v-if 和 v-for 同时用在一个元素上（性能问题）。可将数据替换为一个计算属性，让其返回过滤后的列表，或将 v-if 移动至容器元素上 (比如 ul, ol)

Props 规范

Props 定义应该尽量详细

JavaScript 代码:

    const props = defineprops（{
      status: {
      type: String,
      required: true,
      validator: function (value) {
        return [
          'syncing',
          'synced',
          'version-conflict',
          'error'
        ].indexOf(value) !== -1
      }
     }
   }）