Vue开发规范

2021-04-08 本文已影响0人泡杯感冒灵

本文为基于vue官方风格整理的一份vue前端开发规范。

此规范主要目的
1. 统一团队开发风格，输出高质量的代码
2. 便于团队协作，提升开发效率。
3. 便于后期项目维护。

1. 命名规范

1.1 普通变量命名规范

命名方法：驼峰命名法
命名规范：
1. 命名必须是跟需求相关的词，例如我们要声明一个变量表示 我的老师，我们可以这样定义 let myTeacher = "我的老师"
2. 命名是复数的时候，需要加s，例如当我们想声明一个数组用来表示很多朋友，我们可以这样定义let friends = new Array()

1.2 常量命名规范

命名方法：全部大写(推荐)
命名规范：使用大写字母和下划线来组合命名，下划线用以分割单词。

const MAX_LIMIT = 150
const URL = 'https://www.taobao.com/'

1.3 组件命名规范

命名组件应遵循PascalCase约定，也就是组件名应该始终是多个单词的(根组件App除外)，并且单词首字母应该大写。

// good
export default {
 name: 'TodoItem',
 // ...
}

// bad 
export default {
 name: 'Todo',
 // ...
}

使用组件应遵循kebab-case 约定，也就是在页面中使用组件，需要前后闭合，并以短线分割。

<div id="app">
  <todo-item></todo-item>
</div>

1.4 method方法命名规范

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

//good：
jumpPage、openUserInfoDialog

//bad：
go、nextPage、show、open、login

请求数据方法，以data结尾

// good
getListData   postFormData

// bad
getList  postForm

尽量使用常用单词开头

set、get、open、close、jump

附：函数方法昂用的动词

get 获取/set 设置,
add 增加/remove 删除
create 创建/destory 移除
start 启动/stop 停止
open 打开/close 关闭,
read 读取/write 写入
load 载入/save 保存,
create 创建/destroy 销毁
begin 开始/end 结束,
backup 备份/restore 恢复
import 导入/export 导出,
split 分割/merge 合并
inject 注入/extract 提取,
attach 附着/detach 脱离
bind 绑定/separate 分离,
view 查看/browse 浏览
edit 编辑/modify 修改,
select 选取/mark 标记
copy 复制/paste 粘贴,
undo 撤销/redo 重做
insert 插入/delete 移除,
add 加入/append 添加
clean 清理/clear 清除,
index 索引/sort 排序
find 查找/search 搜索,
increase 增加/decrease 减少
play 播放/pause 暂停,
launch 启动/run 运行
compile 编译/execute 执行,
debug 调试/trace 跟踪
observe 观察/listen 监听,
build 构建/publish 发布
input 输入/output 输出,
encode 编码/decode 解码
encrypt 加密/decrypt 解密,
compress 压缩/decompress 解压缩
pack 打包/unpack 解包,
parse 解析/emit 生成
connect 连接/disconnect 断开,
send 发送/receive 接收
download 下载/upload 上传,
refresh 刷新/synchronize 同步
update 更新/revert 复原,
lock 锁定/unlock 解锁
check out 签出/check in 签入,
submit 提交/commit 交付
push 推/pull 拉,
expand 展开/collapse 折叠
begin 起始/end 结束,
start 开始/finish 完成
enter 进入/exit 退出,
abort 放弃/quit 离开
obsolete 废弃/depreciate 废旧,
collect 收集/aggregate 聚集

1.5 views下的文件命名

只有一个文件的情况下不会出现文件夹，而是直接放在views目录下面，如 index.vue
尽量是名词，且使用驼峰命名法

例外情况：

作用域不大临时变量可以简写，比如：str,num,obj,un,arr。
循环变量可以简写，比如：i,j,k

2. 结构化规范

2.1 目录结构

|— build                    构建脚本目录
    |— build.js             生产环境构建（编译打包）脚本
    |— check-versions.js    版本验证工具
    |— utils.js             构建相关工具方法（主要用来处理css类文件的loader）
    |— vue-loader.conf.js   处理vue中的样式
    |— webpack.base.conf.js webpack基础配置
    |— webpack.dev.conf.js  webpack开发环境配置
    |— webapck.prod.conf.js webpack生产环境配置
|— config                   项目配置
    |— dev.env.js           开发环境变量
    |— index.js             主配置文件
    |— prod.env.js          生产环境变量
|— node_modules             项目依赖模块
|— server                   项目部署文件
|— src                      项目源码目录
    |— assets               资源目录，资源会被webpack构建
        |— js               公共js文件目录
        |— css              公共样式文件目录
        |— images           图片存放目录
    |— components           项目开发的vue组件
    |— routers              前端路由目录
    |— store                vuex目录，定义项目状态管理
        |— store.js         组装模块并导出，统一管理导出，也可命名为index.js
    |— App.vue              vue项目的根组件
    |— main.js              入口js文件
|— static                   纯静态资源
|— theme                    element-ui样式库
|— .babelrc                 babel的配置文件
|— .editorconfig            编辑器的配置文件
|— .gitignore               git的忽略配置文件
|— .postcssrc.js            postcss的配置文件
|— element-variables.scss   element变量
|— isIe.js                  判别浏览器的js文件
|— index.html               html模板，项目入口页面
|— package-lock.json        项目实际安装  的各个npm package的具体来源和版本号
|— package.json             npm包配置文件，依赖包信息
|— README.md                项目介绍

2.2 vue文件基本结构

<template>
    <div>
      <!--必须在div中编写页面，注意template下有且只能有一个根节点-->
    </div>
  </template>
  <script>
    export default {
      components : {
      },
      data () {
        return {
        }
      },
      mounted() {
      }，
      methods: {
      }
   }
  </script>
  <!--声明语言，并且添加scoped-->
  <style lang="scss" scoped>
  </style>

2.3 多个特性的元素规范

多个特性的元素应该分多行撰写，每个特性一行。

<!-- good -->
<img
  src="https://vuejs.org/images/logo.png"
  alt="Vue Logo"
>
<my-component
  foo="a"
  bar="b"
  baz="c"
>
</my-component>

<!-- bad -->
< img src="https://vuejs.org/images/logo.png" alt="Vue Logo">
<my-component foo="a" bar="b" baz="c"></my-component>

元素特性的顺序，原生属性放前边，指令放后边

  - class
  - id,ref
  - name
  - data-*
  - src, for, type, href,value,max-length,max,min,pattern
  - title, alt，placeholder
  - aria-*, role
  - required,readonly,disabled
  - is
  - v-for
  - key
  - v-if
  - v-else-if
  - v-else
  - v-show
  - v-cloak
  - v-pre
  - v-once
  - v-model
  - v-bind,:
  - v-on,@
  - v-html
  - v-text

2.4 组件选项顺序

  - components
  - props
  - data
  - computed
  - filter
  - watch
  - created
  - mounted
  - metods

3. UI框架选择

PC端Vue项目UI框架：Element UI、iView等
移动端Vue项目UI框架：vant UI、vux等

4. 注释规范

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

4.1 务必添加注释列表

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

4.2 单行注释

注释单独一行，不要在代码后的同一行内加注释。

// good
// 姓名
var name = 'abc'

// bad
var name = 'abc'  //姓名

多行注释

组件使用说明，和调用说明
      /**
      * 组件名称
      * @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>
      **/

5. 编码规范

统一的编码规范，可使代码更易于阅读，易于理解，易于维护，尽量按照eslint格式要求编写代码

5.1 使用ES6风格编码

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

  // good
  const a = 'foobar'
  const b = `foo${a}bar`
  const c = 'foobar'

  // acceptable
  const c = `foobar`

  // bad
  const a = 'foobar'
  const b = 'foo' + a + 'bar'

结构赋值

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


const arr = [1,2,3,4]

// good 
const [first,second] = arr

// bad
const first = arr[0]
const second= arr[1]

3.2 函数参数为对象属性时，优先使用结构赋值

// 对象解构赋值

  // good
  function getFullName(obj) {
    const { firstName, lastName } = obj
  }

  // best
  function getFullName({ firstName, lastName }) {}

  // bad
  function getFullName(user) {
    const firstName = user.firstName
    const lastName = user.lastName
  }

拷贝数组

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

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

  // bad
  const itemsCopy = items

箭头函数
看场合尽量使用箭头函数，代码更简洁而且绑定了this

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

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

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

模块

如果模块只有一个输出值，就使用export default,如果模块有多个输出值，就使用export。注意export default和export不要同时使用

// 第一组
export default function crc32() { // 输出
  // ...
}
 
import crc32 from 'crc32'; // 输入
 
// 第二组
export function crc32() { // 输出
  // ...
};
 
import {crc32} from 'crc32'; // 输入

如果模块默认输出一个函数，则函数名首字母应小写

function addNewUser(){}
export default addNewUser;

如果模块默认输出一个对象，对象名的首字母应该大写

const NewUser = {
  name:'...'
}
export default NewUser ;

5.2 指令规范

指令有语法糖，尽量采用语法糖形式

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

  // bad
  v-bind:class="{'show-left'：true}"
  v-on:click="getListData"

v-for 必须加上key属性，并保证key值的唯一性

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

  <!-- bad -->
  <ul>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ul>

避免v-for和v-if同时用在一个元素上,如需要组合使用这两种指令，有2种解决方案
3.1 将数组替换为一个计算属性，让其返回过滤后的列表

<!-- bad -->
  <ul>
    <li v-for="user in users" v-if="user.isActive" :key="user.id">
      {{ user.name }}
    </li>
  </ul>

  <!-- good -->
  <ul>
    <li v-for="user in activeUsers" :key="user.id">
      {{ user.name }}
    </li>
  </ul>

  <script>
  computed: {
    activeUsers: function () {
      return this.users.filter(function (user) {
        return user.isActive
      })
    }
  }
  </script>

3.2 把v-if写在容器元素上，比如 ul,ol

<!-- bad -->
  <ul>
    <li v-for="user in users" v-if="shouldShowUsers" :key="user.id">
      {{ user.name }}
    </li>
  </ul>

  <!-- good -->
  <ul v-if="shouldShowUsers">
    <li v-for="user in users" :key="user.id">
      {{ user.name }}
    </li>
  </ul>

5.3 Props规范

props定义应该尽量详细

// bad 这样做只有开发原型系统时可以接受
props: ['status']

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

6. 异常处理规范

JavaScript本身是一个弱类型语言，项目中容易发生错误，做好网页错误监控，能帮助开发者迅速定位问题，保证线上稳定。

6.1 errorHandler： Vue 中最广泛使用的异常处理方式，是一个全局配置项，用来在全局捕获异常

 /**
      * 参数解析
      * @err  error对象
      * @vm vue实例
      * @info 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
      **/
Vue.config.errorHandler = function(err, vm, info) {
    console.error('抛出全局异常')
    console.error(vm)
    console.error(error)
    console.error(info)
};

6.2 errorCaptured：当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播

 errorCaptured(err, vm, info) {
        console.error('抛出组件异常')
        console.error(vm)
        console.error(error)
        console.error(info)
        return false;
    }

6.3 window.onerror 是一个全局的异常处理函数，可以捕获所有的 JavaScript 异常。

/**
      * 参数解析
      * @message：错误消息（字符串）
      * @source：引发错误的脚本的URL（字符串）
      * @lineno：发生错误的行号（数值）
      * @colno：发生错误的行的列号（数值）
      * @error：错误对象（对象）
      **/
window.onerror = function(message, source, lineno, colno, error) {};

6.4 接口异常尽量在then().catch()中处理(axios二次封装响应拦截中处理亦可)。
6.5 写代码的时候，如果变量的值是通过接口动态获取的，可以为变量准备默认值以防止接口返回错误导致的报错。也可以对变量的值或长度(比如数组)进行判断，再做后续的逻辑处理。

其他

调试信息 console.log(),debugger使用完及时删除
除了三目运算符,if else等禁止简写

Vue开发规范

本文为基于vue官方风格整理的一份vue前端开发规范。

1. 命名规范

1.1 普通变量命名规范

1.2 常量命名规范

1.3 组件命名规范

1.4 method方法命名规范

1.5 views下的文件命名

例外情况：

2. 结构化规范

2.1 目录结构

2.2 vue文件基本结构

2.3 多个特性的元素规范

2.4 组件选项顺序

3. UI框架选择

4. 注释规范

4.1 务必添加注释列表

4.2 单行注释

5. 编码规范

5.1 使用ES6风格编码

5.2 指令规范

5.3 Props规范

6. 异常处理规范

其他

猜你喜欢

热点阅读

Vue开发规范

本文为基于vue官方风格整理的一份vue前端开发规范。

1. 命名规范

1.1 普通变量 命名规范

1.2 常量 命名规范

1.3 组件 命名规范

1.4 method方法 命名规范

1.5 views下的文件命名

例外情况：

2. 结构化规范

2.1 目录结构

2.2 vue文件基本结构

2.3 多个特性的元素规范

2.4 组件选项顺序

3. UI框架选择

4. 注释规范

4.1 务必添加注释列表

4.2 单行注释

5. 编码规范

5.1 使用ES6风格编码

5.2 指令规范

5.3 Props规范

6. 异常处理规范

其他

猜你喜欢

热点阅读

1.1 普通变量命名规范

1.2 常量命名规范

1.3 组件命名规范

1.4 method方法命名规范