参考博客

简练总结

  • 项目名 小写中划线
  • 文件夹 小驼峰
  • 文件 小写下划线
  • class/id 小写中划线
  • 变量函数 小驼峰
  • 常量 大写
  • Vue组件 大驼峰
格式化规范推荐使用Vscode 采用相同的配置,保证格式化统一。项目的格式化遵循eslintrc.js中规定的规则;HTML和CSS的格式化与主流保持一致。
命名规范
1. 文件名用下划线连接;
2. 类、id 用中划线;
3. 项目名用中划线;
4. 文件夹用小驼峰,组件用大驼峰。
项目命名全部以小写字母命名,以中划线分割。如my-project
目录命名全部以小驼峰命名法,除第一个单词之外,其他单词首字母大写。如myDir。
文件名组件命名遵循 Pascal 命名法(大驼峰),例如 AddressPicker.vue
JS/TS文件小写字母命名,多个单词以下划线连接,例如 util.js、util_helper.js
HTML/CSS文件确保文件命名总是以字母开头而不是数字,且字母一律小写,以下划线连接且不带其他标点符号。如 my_page.html、my_page.css。
标识符媒体命名全部以小写字母命名,多个单词以下划线连接。详情见下文
class/id命名全部字母为小写,单词之间统一使用中划线 “-” 连接。详情见下文
js 变量 函数采用小驼峰的命名方式;采用字母打头,不使用 `_` 和 `$` 与系统和第三库的变量进行区分;
js 常量字母全大写
  • 图片命名: 全部以小写字母命名,多个单词以下划线连接
    常见组成:
    图片业务(可选) + 图片功能类别(必选)+ 图片模块名称(可选) + 图片精度(可选)
组成举例
图片业务oe_:在线教育 / jp_:教培 / bt_:碑帖
图片功能类别logo:LOGO类 | icon_:模块类固化的图标 | btn_:按钮
图片模块名称course:课程 / avatar:用户头像
图片精度普清:@1x / Retina:@2x @3x
  • 视频音频等多媒体资源也可以采用类似的思路

  • class/id命名: 全部字母为小写,单词之间统一使用中划线 “-” 连接
    原则 父级class + 本级class ;
    超过四级时,可对祖先缩写成一个单词

  • JS 命名

  1. 变量与函数 采用小驼峰的命名方式;采用字母打头,不使用 _$ 与系统和第三方库的变量进行区分
  2. 全局变量可考虑全大写
  3. 常量使用全大写命名

有意义的命名

文件名使用小写的原因:避免有些服务器大小写敏感有些不敏感而造成的差异

Vue 倡导的规范

文件名采用中划线
vue 风格指南

必要的

  1. 组件名使用多个单词
    理由:避免与现有以及未来的 HTML 元素产生冲突
  2. Prop 定义尽量详细,类型、默认值、必要时设置验证器
    理由:代码可读性,格式校验
  3. 为 v-for 设置 key 值
    理由:管理子树状态,对象固化
    在极少数对性能有严格要求的情况下,为了避免对象固化,你可以刻意做一些非常规的处理。
  4. 避免 v-if 和 v-for 一起使用
    理由:vue2 v-for 的优先级更高,vue3 反之。避免歧义可采用其他方式替代。
  1. 需要筛选待迭代对象,可以通过计算属性处理。(不适用v-if)
  2. 使用 父级或 template 承载其中一个命令
  1. 为组件样式设置作用域
    不一定使用 scoped,BEM class管理
  2. 私有 property
    做不到私有,名称应当注意 $_yourPluginName_ 前缀
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐