Vue相关开发规范目录及说明.docxVIP

Vue相关开发规范目录及说明

本文档为前端vue开发规范

规范目的

命名规范

结构化规范

注释规范

编码规范

CSS规范

规范目的

为提高团队协作效率

便于后台人员添加功能及前端后期优化维护

输出高质量的文档

命名规范

为了让大家书写可维护的代码，而不是一次性的代码

让团队当中其他人看你的代码能一目了然

甚至一段时间时候后你再看你某个时候写的代码也能看

普通变量命名规范

命名方法：驼峰命名法

命名规范：

命名必须是跟需求的内容相关的词，比如说我想申明一个变量，用来表示我的学校，那么我们可以这样定义constmySchool=我的学校;

命名是复数的时候需要加s,比如说我想申明一个数组，表示很多人的名字，那么我们可以这样定义constnames=newArray();

常量

命名方法:全部大写

命名规范:使用大写字母和下划线来组合命名，下划线用以分割单词。

constMAX_COUNT=10constURL=/复制代码

组件命名规范

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

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

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

组件名应该始终是多个单词的，根组件App除外

有意义的名词、简短、具有可读性

命名遵循PascalCase约定

公用组件以Abcd(公司名缩写简称)开头，如（AbcdDatePicker,AbcdTable）

页面内部组件以组件模块名简写为开头，Item为结尾，如（StaffBenchToChargeItem，StaffBenchAppNotArrItem）

使用遵循kebab-case约定

在页面中使用组件需要前后闭合，并以短线分隔，如（abcd-date-picker/abcd-date-picker，abcd-table/abcd-table）

导入及注册组件时，遵循PascalCase约定

同时还需要注意：必须符合自定义元素规范:切勿使用保留字。

method方法命名命名规范

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

//bad

go、nextPage、show、open、login

//good

jumpPage、openCarInfoDialog

复制代码

请求数据方法，以data结尾

//bad

takeData、confirmData、getList、postForm

//good

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更新/reve