宗旨:规范只是一种相对规则,没有最优值,按照规范做事,提高代码质量,降低耦合性
一、命名规范
1. 工程名称 2. 工程目录 3. 文件/文件夹 4. 代码元素
1.工程名称
创建项目一般以小驼峰命名(例如:vue-element-admin)偏多但不唯一,见名知意,看起来也清爽,不要以ui,web这类命名没有多少含义,多工程更加不好管理
2.工程目录
保证结构清晰有层次感,模块独立,命名规范,工程大多人开发的的时候可以进一步细分模块便于管理
3.文件夹/文件
在Vue项目中文件和文件夹一般遵循的规范
3.1文件夹
1.全局通用的组件放在/src/components下,其他业务页面中的组件放在各自页面下的文件夹下可以以Item结尾命名标出
2.每个components文件夹下最多只有一层文件夹,且文件夹名称为组件的名称,文件夹下必须有index.vue或index.js,components下的子文件夹名称统一大写开头(PascalCase),其他文件夹统一使用kebab-case的风格
3.主文件夹名字最好使用复数(比如filters、images、mixins),因为一般都不止一个文件
3.1文件名
1.除了index.js 或者 index.vue,统一使用小写字母开头的(kebab-case)命名规范
2.属于组件或类的,统一使用大写字母开头的(PascalCase)命名规范
3.其他非组件或类的,统一使用小写字母开头的(kebab-case)命名规范
4.尽量是名词,大写开头,开头的单词就是所属模块名字(CarDetail、CarEdit、CarList)
5.名字至少两个单词(good: CarDetail)(bad: Car)常用结尾单词有(Detail、Edit、List、Info、Report)以Item 结尾的代表着组件(CarListItem、CarInfoItem)
原因:展开node_modules中的项目依赖,会发现,几乎所有的项目文件夹命名都是 kebab-case命名的,使用kebab-case命名的文件夹比camelCase命名的文件夹看起来更清晰
4.代码元素
主要是指编码风格,如下:
二、编码规范
推荐文档
1.前端代码规范凹凸实验室
2.vue官网风格指南
3.Airbnb JavaScript 代码规范(ES6)
4.10个GitHub上超火和超好看的管理后台模版
1.HTML 2.CSS 3.JavaScript 4.Vue 5.Image 6.JSON配置文件 7.注释
1.HTML
1.结构、样式、行为分离,语义化
2.统一空格缩进,不要使用 Tab 或者 Tab、空格混搭
3.统一文件编码utf-8
4.一律使用小写字母
5.省略外链资源 URL协议部分
省略外链资源(图片及其它媒体资源)URL 中的 http / https 协议,使 URL 成为相对地址,避免Mixed Content 问题,减小文件字节数。其它协议(ftp 等)的 URL 不省略。
5.统一注释