vue开发规范（命名建议）

规范目的

• 为提高团队协作效率
• 便于后台人员添加功能及前端后期优化维护
• 输出高质量的文档

命名规范

• 书写可维护的代码，而不是一次性的代码
• 让团队中其他人看到代码一目了然
• 让自己回顾代码方便

普通变量命名规范

• 命名方法： 驼峰命名法
• 命名规范：
• 要跟需求的内容相关，比如const mySchool = "我的学校"
• 命名是复数的时候需要加s，比如const names = new Array()

常量

组件命名规范

官方文档推荐规则

PascalCase(单词首字母大写命名)是最通用的声明约定

kebab-case(短横线分隔命名)是通用的使用约定

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

method方法命名命名规范

• 驼峰式命名，统一使用动词或者动词+名词形式jumpPage、openCarInfoDialog
• 请求数据的方法，以data结尾getListData、 postFormData
• init、refresh单词除外
• 尽量使用常用单词开头(set、get、go、can、has、is)
• 附：函数方法常用的动词

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 折叠

start 开始/finish 完成

enter 进入/exit 退出,

abort 放弃/quit 离开

obsolete 废弃/depreciate 废旧,

collect 收集/aggregate 聚集

views 下的文件命名

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

props命名

• 在声明prop的时候，其命名应该始终使用camelCase，而在模板中应该始终使用kebab-case
• 例外情况
• 作用域不大临时变量可以简写，比如： str，num，bol，obj，fun，arr
• 循环变量可以简写，比如： i，j，k等

结构化规范

目录文件夹及文件规范

• 以下统一管理处均对应相应模块
• 以下全局文件文件均以index.js导出，并在main.js中导入
• 以下临时文件，在使用后，接口已经有了，发布后清除

src                               源码目录

|-- api                             接口，统一管理

|-- assets                           静态资源，统一管理

|-- components                       公用组件，全局文件

|-- filters                         过滤器，全局工具

|-- icons                           图标，全局资源

|-- datas                           模拟数据，临时存放

|-- lib                             外部引用的插件存放及修改文件

|-- mock                             模拟接口，临时存放

|-- router                           路由，统一管理

|-- store                           vuex, 统一管理

|-- views                         视图目录

|   |-- staffWorkbench               视图模块名

|   |-- |-- api                     需要就近维护的接口文件夹

|   |-- |-- index.vue               模块入口页面

|   |-- |-- indexComponents         模块页面级组件文件夹

|   |-- |-- components               模块通用组件文件夹

文件基本结构

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

多个特性的元素规范

• 对个特性的原酸应该分行撰写，每行一个特性

<img
 src="https://vuejs.org/images/logo.png"
 alt="Vue Logo"

<my-component
 foo="a"
 bar="b"
 baz="c"

元素特征的顺序

• 原生属性放前面，指令放后面，也可以按照统一的格式化规则进行格式化
• 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
• v-once

组件选项顺序

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

注释规范

• 代码注释在项目的后期维护中非常重要，所以每一个被复用的组件都应该有编写组件的使用说明，为组件中每一个方法编写方法说明

务必添加注释列表

• 公共组件使用说明

• 各组件中重要函数或者类说明

• 复杂的业务逻辑处理说明

• 特殊情况的代码处理说明，对于代码中特殊用途的变量、存在的临界值、函数中使用的hack、使用了某种算法或者思路等需要进行注释描述

• 多重if判断语句

• 注释块必须以/**(至少两个星号)开头**/

• 单行注释使用//

单行注释

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

多行注释

组件使用说明，和调用说明

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

编码规范

• 统一的编码规范，可使代码更易于阅读，易于理解，易于维护

源码风格

使用ES6风格编码

• 定义变量使用let，定义常量使用const
• 静态字符串一律使用单引号或反引号，动态字符串使用反引号
• 解构赋值
• 数组成员对变量赋值是，优先使用解构赋值
• 函数的参数如果是对象的成员，优先使用解构赋值
• 拷贝数组：使用(...)拷贝数组const itemsCopy = [...items]
• 使用箭头函数
• 模块
• 如果模块只有一个输出值，就用export default，如果模块有多个输出值，就不使用export default，export default与普通的export不要同时使用
• 如果模块默认输出一个函数，函数名的首字母应该小写
• 如果模块默认输出一个对象，对象名的首字母应该大写

指令规范

• 指令有缩写一律采用缩写形式
• v-for循环必须有key
• 避免v-if和v-for同时出现在一个元素上
• 解决方案1：将数据替换为一个计算属性，让其返回过滤后的列表

• {{ user.name }}

• {{ user.name }}

• 解决方案2：将v-if移动至容器元素上

Props规范

• props定义应该尽量详细

其他

• 避免this.$parent
• 组件必须相互保持独立，Vue 组件也是。如果组件需要访问其父层的上下文就违反了该原则。
• 如果一个组件需要访问其父组件的上下文，那么该组件将不能在其它上下文中复用。
• 调试信息console.log()debugger使用完及时删除
• 除了三目运算，if, else等禁止简写

CSS 规范

通用规范

• 统一使用"-"连字符
• 省略值为0的单位
• 如果CSS可以做到，就不要用JS
• 建议适当缩写
• 声明应该按照下表左到右，上到下的顺序

显示属性	自身属性	文本属性和其他修饰
display	width	font
visibility	height	text-align
position	margin	text-decoration
float	padding	vertical-align
clear	border	white-space
list-style	overflow	color
top	min-width	background

• 元素选择器应该避免在scoped中出现
• 分类的命名方法：使用单个字母加上"-"为前缀
• 布局(grid) (.g-)
• 模块(module) (m-)
• 元件(unit) (.u-)
• 功能(function) (.f-)
• 皮肤(skin) (.s-)
• 状态 (.z-)
• 统一语义理解和命名
• 布局(.g-)

语义	命名	简写
文档	doc	doc
头部	head	hd
主体	body	bd
尾部	foot	ft
主栏	main	mn
主栏子容器	mainc	mnc
侧栏	side	sd
侧栏子容器	sidec	sdc
盒容器	wrap/box	wrap/box

• 模块 (.m-)、元件(.u-)

语义	命名	简写
导航	nav	nav
子导航	subnav	snav
面包屑	crumb	crm
菜单	menu	menu
选项卡	tab	tab
标题区	head/title	hd/tt
内容区	body/content	bd/ct
列表	list	lst
表格	table	tb
表单	form	fm
热点	hot	hot
排行	top	top
登陆	login	log
标志	logo	logo
广告	advertise	ad
搜索	search	sch
幻灯	slide	sld
提示	tips	tips
帮助	help	help
新闻	news	news
下载	download	dld
注册	regist	reg
投票	vote	vote
版权	copyright	cprt
结果	result	rst
标题	title	tt
按钮	button	btn
输入	input	ipt

• 功能(.f-)

语义	命名	简写
浮动清除	clearboth	cb
向左浮动	floatleft	fl
向右浮动	floatright	fr
内联块级	inlineblock	ib
文本居中	textaligncenter	tac
文本居右	textalignright	tar
文本居左	textalignleft	tal
垂直居中	verticalalignmiddle	vam
溢出隐藏	overflowhidden	oh
完全消失	displaynone	dn
字体大小	fontsize	fs
字体粗细	fontweight	fw

• 皮肤(.s-)

语义	命名	简写
字体颜色	fontcolor	fc
背景	background	bg
背景颜色	backgroundcolor	bgc
背景图片	backgroundimage	bgi
背景定位	backgroundposition	bgp
边框颜色	bordercolor	bdc

• 状态(.z-)

语义	命名	简写
选中	selected	sel
当前	current	crt
显示	show	show
隐藏	hide	hide
打开	open	open
关闭	close	close
出错	error	err
不可用	disabled	dis

特殊规范

• 对用页面级组件样式，应该是有作用域的
• 对于公用组件或者全局组件库，我们应该更倾向于选用基于class的BEM策略