前端:项目 文件 文件夹 命名规范
参考博客
简练总结
- 项目名 小写中划线
- 文件夹 小驼峰
- 文件 小写下划线
- 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 命名
- 变量与函数 采用小驼峰的命名方式;采用字母打头,不使用
_
和$
与系统和第三方库的变量进行区分 - 全局变量可考虑全大写
- 常量使用全大写命名
有意义的命名
文件名使用小写的原因:避免有些服务器大小写敏感有些不敏感而造成的差异
Vue 倡导的规范
文件名采用中划线
vue 风格指南
必要的
- 组件名使用多个单词
理由:避免与现有以及未来的 HTML 元素产生冲突 - Prop 定义尽量详细,类型、默认值、必要时设置验证器
理由:代码可读性,格式校验 - 为 v-for 设置 key 值
理由:管理子树状态,对象固化
在极少数对性能有严格要求的情况下,为了避免对象固化,你可以刻意做一些非常规的处理。 - 避免 v-if 和 v-for 一起使用
理由:vue2 v-for 的优先级更高,vue3 反之。避免歧义可采用其他方式替代。
- 需要筛选待迭代对象,可以通过计算属性处理。(不适用v-if)
- 使用 父级或 template 承载其中一个命令
- 为组件样式设置作用域
不一定使用 scoped,BEM class管理 - 私有 property
做不到私有,名称应当注意$_yourPluginName_
前缀
前端:项目 文件 文件夹 命名规范相关推荐
- vue文件命名规范和文件夹命名规范
views 命名 views 文件夹下面是由 以页面为单位的vue文件 或者 模块文件夹 组成的,放在 src 目录之下,与 components.assets 同级. views 下的文件夹命名 v ...
- 前端项目资源文件使用cdn加速
背景: 前端项目代码在上传到服务器以后 资源文件往往会很大 而使用的云服务一般带宽都会很小(带宽很贵) 所以资源往往需要放到cdn上面来加速 节约服务器的带宽 这里我们使用回源的方式来实现cdn加速 ...
- 前端html页面中的命名规范
项目中文件名字 1:符合应用场景 2:一律使用小写英文字母,统一要求:英文,禁止中文拼音. 5:命名原则:使团队成员可以看懂自己代码:自己也方便查找并修改 xxx.html文件的命名 1:主页面 in ...
- css宋体代码_前端开发必备的CSS命名规范与常用CSS代码集合
编辑 | web前端开发 来源 | web前端开发 我们在用html+css进行网页的排版布局时,经常会遇到CSS命名,如果是在团队多人协作开发时,团队里都会有自己的命名规范与要求. 但如果是自己在个 ...
- css外部命名规范,前端开发较全CSS命名规范
前端开发用什么框架吗 前端开发新框架 前端开发app混合开发框架 文件名命名规范 模块:module. 基本共用:base. 布局.版面:layout.css 主题:themes.css 专栏:col ...
- 【前端开发】CSS BEM命名规范
目录 1.BEM 2.实战 Block Element Modifier 3.总结 1.BEM BEM其实是块(block).元素(element).修饰符(modifier)的缩写,利用不同的区块, ...
- java项目中包的命名规范
一.包命名规范 为什么把包命名单独提出来呢?因为之前的命名一直是有问题的,被别人质疑了,所以这里单独提出来记录一下. 问题是关于包名里的下划线(_)是使用,如果包名的一个层级是多个单词,该不该用下划线 ...
- 各个地区的语言代号及value文件夹命名规范
上一篇博客,讲述多语言测试的注意事项时,提到多语言测试中不得不知道的语言代号的概念,也提到了系统语言选项.语言名称.代号之间的关系. 这里附上两个在测试开发过程中必须用到的清单: Android系统和 ...
- Web 前端——项目文件夹命名规范
文件夹名称 含义 src,source 源代码,用src居多 test,__tests__ 测试文件,也经常用__test__,facebook的测试框架jest默认的测试文件目录就是__test__ ...
- Nginx 部署前端项目dist文件
写好的项目 npm run build 生成的dist文件夹放桌面备用 下载nginx后 将dist文件夹放入html文件夹中 进入conf修改配置 里面有nginx.conf 文本修改 下面s ...
最新文章
- 2020年服务器操作系统占有率,服务器操作系统占有率
- python多线程爬虫实例-python支持多线程的爬虫实例
- 吴教主深度学习和神经网络课程总纲
- 猜猜乐游戏php源码,C/C++百行代码实现热门游戏消消乐功能的示例代码
- 网络相关的一些基本的命令的使用(ping、ifconfig、route、netstat)---Linux学习笔记
- 无限滚动重置服务器,简单无限滚动的实现
- vue3 线上环境 ctx 无法识别
- 华中科技大学计算机视觉张朋,管涛-华中科技大智能媒体计算与网络安全实验室...
- sklearn的快速使用
- spring catch了异常还是回滚了_干货:Spring 踩坑之@Transactional 神奇失效
- ubuntu下安装gcc
- 计算语言学之拼写纠错
- Allegro Pad Designer焊盘制作指南
- html动画页面源码,9款超炫HTML5最新动画源码
- 技术变现第一步:网站快速接入国际支付 Stripe
- 名编辑电子杂志大师教程 | 设置目录
- mapset——C++
- 大数据系列 -- 数据埋点
- html 波斯语 对齐,在htm中使用波斯语字体发送大量HTML电子邮件
- jquery日历之昨天--今天--明天