前端命名规范
文件命名规则
文件名称命名规则
统一使用小写英文字母、数字、下划线组合命名,不能包含汉字、空格。
命名遵循原则:
- 清晰准确,见名知意
- 便于查找
例如
首页
- 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