参考博客
简练总结
- 项目名 小写中划线
- 文件夹 小驼峰
- 文件 小写下划线
- 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 |
- 变量与函数 采用小驼峰的命名方式；采用字母打头，不使用
_ 和 $ 与系统和第三方库的变量进行区分
- 全局变量可考虑全大写
- 常量使用全大写命名
有意义的命名
文件名使用小写的原因：避免有些服务器大小写敏感有些不敏感而造成的差异
Vue 倡导的规范
文件名采用中划线
vue 风格指南
必要的
- 组件名使用多个单词
理由：避免与现有以及未来的 HTML 元素产生冲突
- Prop 定义尽量详细，类型、默认值、必要时设置验证器
理由：代码可读性，格式校验
- 为 v-for 设置 key 值
理由：管理子树状态，对象固化
在极少数对性能有严格要求的情况下，为了避免对象固化，你可以刻意做一些非常规的处理。
- 避免 v-if 和 v-for 一起使用
理由：vue2 v-for 的优先级更高，vue3 反之。避免歧义可采用其他方式替代。
- 需要筛选待迭代对象，可以通过计算属性处理。（不适用v-if）
- 使用 父级或 template 承载其中一个命令
- 为组件样式设置作用域
不一定使用 scoped，BEM class管理
- 私有 property
做不到私有，名称应当注意 $_yourPluginName_ 前缀
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
