外观

本页目录

命名规范 ​

规范的目的是为了编写高质量的代码，降低沟通成本，提高团队合作开发的效率，最终让大家每个人都可以写出一套漂亮整洁的代码。参考官方文档

规范方式

  • 帕斯卡拼写法，英文为PascalCase，特点是所有连接单词的首字母大写，可以简称为大坨峰
    • 骆驼拼写法，英文为camelCase，特点是第一个连接的单词的首字母小写，其余大写，可以简称为小坨峰；
    • 短横拼写法，英文为kebab-case，特点是所有连接的单词以中划线（-）连接，可以简称为中划线。
  • 文件和文件夹中除components中组件文件夹要使用 大坨峰规则外，其他文件和文件夹都为中划线分隔。

整体规范 ​

命名不可使用中文拼音

字母统一小写，专有名词可大写

共性在前，个性在后

语义要清楚完整，不要过分简写

命名严谨性 ​

与后端命名统一。比如权限：后端privilege, 前端无论router , store, api等都必须使用privilege单词！

文件和代码中的命名严禁使用拼音与英文混合的方式，更不允许直接使用中文的方式。 正确的英文拼写和语法可以让阅读者易于理解，避免歧义。 注：beijing、henan、rmb 等国际通用的名称，可视同英文。

项目命名 ​

字母组成，中划线拼接,全部采用小写方式，以中划线分隔。前面为项目英文名称，后面为项目的类型。尽量不要用mall-management-system，因为被后台占用。

示例：traffic-security-pc、travel-uni-app、mall-management-h5、mall-management-wx

目录（文件夹）命名 ​

文件夹代表着功能或者模块的名字，应该简洁明了。 除components组件目录，使用大坨峰命名， node_modules 依赖外,其余全部采用字母组成，中划线拼接。 有复数结构时，要采用复数命名法

普通示例：

scripts/、styles/、images/、utils/、layouts、company-news/、img/、js/、doc/、api/、order/

特殊：

node_modules示例：node_modules/、 components示例：SvgIcon、Upload、TestUnit

文件命名 ​

文件包括.js .css .html .vue .sass .less 图片等文件

字母组成，中划线拼接

例：sass-index.scss dialog-user-info.vue

组件命名 ​

声明&使用：首字母大写，驼峰拼接

js
// 声明
import DialogUserInfo form '@/components/dialog-user-info'
components: {
    DialogUserInfo
}
// 使用
<DialogUserInfo></DialogUserInfo>

css命名 ​

字母组成，中划线拼接 id采用驼峰式命名

例：.color-white #theDialog

js命名 ​

变量&函数 ​

常量：大写字母、数字组成，下划线拼接，例：CONSULT_TYPE 私有变量：字母、数字组成，驼峰拼接，下划线开头，例：_self 普通变量：字母、数字组成，驼峰拼接，例：idCard 构造函数：字母组成，驼峰拼接，首字母大写，例：Vue() 普通函数：字母组成，驼峰拼接，动词+名词方式组合，例：getList()

形参 ​

形参本身是可以任意定义的，统一是为了更方便地复用/合并代码

参数含义用法示例
i索引switchTab(i) {}
e事件focusHandler(e) {}
v基本类型值setData(v) {}
obj对象let arr = mainList.filter(obj => obj.isCheck)
arr数组let arr = Array.from(obj)
fun函数callback(fun) {}
item列表项jumpDetail(item) {}
elementforEach的项forEach(element=>{})
key,value键值对for (let [key, value] of arr) {}

在 GitHub 上编辑此页

上次更新: