参考博客

简练总结

  • 项目名 小写中划线
  • 文件夹 小驼峰
  • 文件 小写下划线
  • 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_ 前缀

前端:项目 文件 文件夹 命名规范相关推荐

  1. vue文件命名规范和文件夹命名规范

    views 命名 views 文件夹下面是由 以页面为单位的vue文件 或者 模块文件夹 组成的,放在 src 目录之下,与 components.assets 同级. views 下的文件夹命名 v ...

  2. 前端项目资源文件使用cdn加速

    背景: 前端项目代码在上传到服务器以后 资源文件往往会很大 而使用的云服务一般带宽都会很小(带宽很贵) 所以资源往往需要放到cdn上面来加速 节约服务器的带宽 这里我们使用回源的方式来实现cdn加速 ...

  3. 前端html页面中的命名规范

    项目中文件名字 1:符合应用场景 2:一律使用小写英文字母,统一要求:英文,禁止中文拼音. 5:命名原则:使团队成员可以看懂自己代码:自己也方便查找并修改 xxx.html文件的命名 1:主页面 in ...

  4. css宋体代码_前端开发必备的CSS命名规范与常用CSS代码集合

    编辑 | web前端开发 来源 | web前端开发 我们在用html+css进行网页的排版布局时,经常会遇到CSS命名,如果是在团队多人协作开发时,团队里都会有自己的命名规范与要求. 但如果是自己在个 ...

  5. css外部命名规范,前端开发较全CSS命名规范

    前端开发用什么框架吗 前端开发新框架 前端开发app混合开发框架 文件名命名规范 模块:module. 基本共用:base. 布局.版面:layout.css 主题:themes.css 专栏:col ...

  6. 【前端开发】CSS BEM命名规范

    目录 1.BEM 2.实战 Block Element Modifier 3.总结 1.BEM BEM其实是块(block).元素(element).修饰符(modifier)的缩写,利用不同的区块, ...

  7. java项目中包的命名规范

    一.包命名规范 为什么把包命名单独提出来呢?因为之前的命名一直是有问题的,被别人质疑了,所以这里单独提出来记录一下. 问题是关于包名里的下划线(_)是使用,如果包名的一个层级是多个单词,该不该用下划线 ...

  8. 各个地区的语言代号及value文件夹命名规范

    上一篇博客,讲述多语言测试的注意事项时,提到多语言测试中不得不知道的语言代号的概念,也提到了系统语言选项.语言名称.代号之间的关系. 这里附上两个在测试开发过程中必须用到的清单: Android系统和 ...

  9. Web 前端——项目文件夹命名规范

    文件夹名称 含义 src,source 源代码,用src居多 test,__tests__ 测试文件,也经常用__test__,facebook的测试框架jest默认的测试文件目录就是__test__ ...

  10. Nginx 部署前端项目dist文件

    写好的项目 npm run build 生成的dist文件夹放桌面备用 下载nginx后 将dist文件夹放入html文件夹中 进入conf修改配置   里面有nginx.conf  文本修改 下面s ...

最新文章

  1. 2020年服务器操作系统占有率,服务器操作系统占有率
  2. python多线程爬虫实例-python支持多线程的爬虫实例
  3. 吴教主深度学习和神经网络课程总纲
  4. 猜猜乐游戏php源码,C/C++百行代码实现热门游戏消消乐功能的示例代码
  5. 网络相关的一些基本的命令的使用(ping、ifconfig、route、netstat)---Linux学习笔记
  6. 无限滚动重置服务器,简单无限滚动的实现
  7. vue3 线上环境 ctx 无法识别
  8. 华中科技大学计算机视觉张朋,管涛-华中科技大智能媒体计算与网络安全实验室...
  9. sklearn的快速使用
  10. spring catch了异常还是回滚了_干货:Spring 踩坑之@Transactional 神奇失效
  11. ubuntu下安装gcc
  12. 计算语言学之拼写纠错
  13. Allegro Pad Designer焊盘制作指南
  14. html动画页面源码,9款超炫HTML5最新动画源码
  15. 技术变现第一步:网站快速接入国际支付 Stripe
  16. 名编辑电子杂志大师教程 | 设置目录
  17. mapset——C++
  18. 大数据系列 -- 数据埋点
  19. html 波斯语 对齐,在htm中使用波斯语字体发送大量HTML电子邮件
  20. jquery日历之昨天--今天--明天

热门文章

  1. python求和1到100_python实现1加到100
  2. 奶爸日记2 - 鑫鑫感动了婆婆
  3. halo博客:如何加快搜索引擎收录网站速度
  4. 【C语言】百度搜歌(只用歌曲或者歌手名字去搜索实现)
  5. 利用charles抓包
  6. 如何查看ftp服务器信息,如何查看FTP空间使用了多少?
  7. 魔兽世界插件开发-暴雪插件源代码
  8. 信息安全-网络安全风险评估技术原理与应用(二)
  9. springboot下,JedisPool getResource导致大量线程WAITING,服务假死
  10. 快手磁力金牛和小店通的区别