命名规范

前端命名规范

文件命名规则

文件名称命名规则

统一使用小写英文字母、数字、下划线组合命名,不能包含汉字、空格。

命名遵循原则:

  • 清晰准确,见名知意
  • 便于查找
例如

首页

  • index.htm
  • index.html

子页面

  • 统一用翻译的英文命名
  • 如果文件名过长,要提前约定一份缩写的规范,如pro—product
例如:
  • 首页—index
  • 产品列表—prolist
  • 产品详细页面—prodetail
  • 新闻列表—newslist
  • 新闻详细页面—newsdetail
  • 发展历史—history
  • 关于我们—aboutus
  • 联系我们—linkus,contactus
  • 信息反馈—feedback留言—leavewords

Vue 、React命名规则

文件夹命名

项目文件夹命名使用 kebab-case命名规则,统一使用小写字母开头,使用kebab-case命名的文件夹看起来更清晰。

例如:

components

views

router

组件命名

组件的文件名以单词大写开头,使用 PascalCase风格,
单词大写开头对于代码编辑器的自动补全最为友好,因为这使得我们在 JS(X) 和模板中引用组件的方式尽可能的一致。

例如:

Home

NavigationBar

ToolBar

图片文件命名规则

图片的名称分为头尾两部分,用下划线隔开,头部表示此图片的大类性质,例如广告,标志,菜单,按钮等,图片文件应该按照UI划分到不同的文件夹中:

  • banner:放置在页面顶部的广告,装饰图案等长方形的图片
  • logo:标志性的图片
  • button:在页面上位置不固定,并且带有链接的小图片
  • menu:在页面中某一位置连续出现,性质相同的链接栏目的图片
  • pic:装饰用的图片

命名规则

  • 图片名称必须小写,禁止使用特殊字符、中文
  • 使用英文或拼音缩写,禁止特殊字符
  • 名称间隔使用-符号
  • 命名需要能体现图片的大概用途
例如:
  • banner_sohu.gif, banner_sina.gif
  • menu_aboutus.gif,menu_job.gif
  • title_news.gif
  • logo_police.gif
  • pic_people.gif
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值