命名规范

前端命名规范

文件命名规则

文件名称命名规则

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

命名遵循原则：

• 清晰准确，见名知意
• 便于查找

例如

首页

• 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