前端命名规范总结

一、常用命名规范

js 复制代码

camelCase(小驼峰------首字母小写)
PsscalCase(大驼峰------首字母大写)
kebab-case (短横线连接式)
Snake(下划线连接式)

二、项目文件命名

2.1 项目名

全部采用小写方式，以短横线分隔。如：my-project

2.2 目录名

全部采用小写方式，以短横线分隔 ，有复数结构时，要采用复数命名法。

如：assets、components、directives、mixins、utils、views。

js 复制代码

my-project-name/
|- BuildScript    // 流水线部署文件目录
|- docs           // 项目的细化文档目录（可选）
|- nginx          // 部署在容器上前端项目 nginx 代理文件目录
|- node_modules   // 下载的依赖包
|- public         // 静态页面目录
    |- index.html // 项目入口
|- src            // 源码目录
    |- api        // http 请求目录
    |- assets     // 静态资源目录，这里的资源会被wabpack构建
        |- icon   // icon 存放目录
        |- img    // 图片存放目录
        |- js     // 公共 js 文件目录
        |- scss   // 公共样式 scss 存放目录
            |- frame.scss   // 入口文件
            |- global.scss  // 公共样式
            |- reset.scss   // 重置样式
    |- components     // 组件
    |- plugins        // 插件
    |- router         // 路由
    |- routes         // 详细的路由拆分目录（可选）
        |- index.js
    |- store          // 全局状态管理
    |- utils          // 工具存放目录
        |- request.js // 公共请求工具
    |- views          // 页面存放目录
    |- App.vue        // 根组件
    |- main.js        // 入口文件
    |- tests          // 测试用例
    |- .browserslistrc// 浏览器兼容配置文件
    |- .editorconfig  // 编辑器配置文件
    |- .eslintignore  // eslint 忽略规则
    |- .eslintrc.js   // eslint 规则
    |- .gitignore     // git 忽略规则
    |- babel.config.js // babel 规则
    |- Dockerfile // Docker 部署文件
    |- jest.config.js
    |- package-lock.json
    |- package.json // 依赖
    |- README.md // 项目 README
    |- vue.config.js // webpack 配置

2.3 图像文件名

全部采用小写方式，优先选择单个单词命名，多个单词命名以下划线分隔。

js 复制代码

banner.gif
menu_aboutus.gif
logo_police.gif
logo_national.gif
pic_people.jpg

2.4 HTML文件名

全部采用小写方式，优先选择单个单词命名，多个单词命名以下划线分隔。

js 复制代码

|- error_report.html
|- success_report.html

2.5 CSS文件名

全部采用小写方式，优先选择单个单词命名，多个单词命名以短横线分隔。

js 复制代码

|- base.css
|- reset.css
|- common-card.css

2.6 JS文件名

全部采用小写方式，优先选择单个单词命名，多个单词命名以短横线分隔。

js 复制代码

|- index.js
|- plugin.js
|- util.js
|- date-util.js
|- account-model.js
|- collapse-transition.js

以上规则简记为：静态文件下划线分隔，编译文件短横线分隔

三、Vue组件命名

3.1 单文件组件名

单文件组件名应该始终是单词大写开头 (PascalCase)。

js 复制代码

components/ 
|- MyComponent.vue

3.2 单例组件名

只拥有单个活跃实例的组件应该以The 前缀命名，以示其唯一性。

js 复制代码

components/ 
|- TheHeading.vue 
|- TheSidebar.vue

3.3 基础组件名

基础组件：即通用组件，比如 日期选择器、模态框、有数据校验功能的输入框 等。这类组件作为项目的基础控件，会被大量使用，因此组件的 API进行过高强度的抽象，可以通过不同配置实现不同的功能。基础组件在一个页面内可使用多次，在不同页面内也可复用，是高可复用组件

js 复制代码

components/ 
|- BaseTable.vue
|- BaseIcon.vue

3.4 业务组件名

业务组件：在业务中被多个页面复用的组件，与基础组件的区别是，业务组件只在当前项目中会用到，不具有通用性，会包含一些业务，比如数据请求；而基础组件不含业务，在任何项目中都可以使用，功能单一。

掺杂了复杂业务的组件（拥有自身data、prop的相关处理）即业务组件应该以 Custom 前缀命名。

js 复制代码

components/ 
|- CustomCard.vue

3.5 紧密耦合的组件名

和父组件紧密耦合的子组件应该以父组件名作为前缀命名。因为编辑器通常会按字母顺序组织文件，所以这样做可以把相关联的文件排在一起。

js 复制代码

components/ 
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue

3.6 完整单词的组件名

不常用的缩写应该避免。

四、代码参数命名

4.1 name

js 复制代码

export default {
    name: 'ToDoList', 
    // ...
}

4.2 prop

在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。我们单纯的遵循每个语言的约定，在 JavaScript 中更自然的是 camelCase。而在 HTML 中则是 kebab-case

js 复制代码

<WelcomeMessage greeting-text="hi"/>

js 复制代码

export default {
  name: 'MyComponent',
  // ...
  props: {
    greetingText: {
      type: String,
      required: true,
      default: ''
    }
  }
}

4.3 Router Path 命名

Vue Router Path 命名采用 kebab-case 格式。用 Snake（如：/user_info）或 camelCase（如：/userInfo)的单词会被当成一个单词，搜索引擎无法区分语义。

js 复制代码

// 不推荐
{
  path: '/user_info', // user_info 当成一个单词
  name: 'UserInfo',
  component: UserInfo,
  meta: {
    title: '用户信息',
    desc: ''
  }
},

// 推荐
{
  path: '/user-info', // 能解析成 user info
  name: 'UserInfo',
  component: UserInfo,
  meta: {
    title: '用户信息',
    desc: ''
  }
},

4.4 变量

命名方法：camelCase

js 复制代码

let tableTitle = "LoginTable"
let mySchool = "我的学校"

4.5 方法

命名方法：camelCase

js 复制代码

// 1、普通情况下，使用动词 + 名词形式
// 不推荐
go、nextPage、show、open、login

// 推荐
jumpPage、openCarInfoDialog

// 2、请求数据方法，以 data 结尾
// 不推荐
getList、postForm

// 推荐
getListData、postFormData

动词	含义	返回值
can	判断是否可以执行某个动作	函数返回一个布尔值。true：可执行；false：不可执行；
has	判断是否含有某个值	函数返回一个布尔值。true：含有此值；false：不含有此值；
is	判断是否为某个值	函数返回一个布尔值。true：为某个值；false：不为某个值；
get	获取某个值	函数返回一个非布尔值
set	设置某个值	无返回值、返回是否设置成功或者返回链式对象

4.6 常量

命名方法：全部大写下划线分割
命名规范：使用大写字母和下划线来组合命名，下划线用以分割单词

js 复制代码

const MAX_COUNT = 10
const URL = 'http://test.host.com'

4.7 自定义事件

自定义事件应始终使用 kebab-case（短横线连接）的事件名

js 复制代码

<MyComponent @my-event="handleDoSomething" />
this.$emit('my-event')

建议: 除了多单词事件名使用 kebab-case 的情况下，命名还需遵守为 on + 动词的形式。

js 复制代码

<!-- 父组件 -->
<Child @on-search="handleSearch" @on-clear="handleClear"></Child>

// 子组件
export default {
  methods: {
    handleTriggerItem () {
      this.$emit('on-clear')
    }
  }
}

4.8 事件方法

命名方法：camelCase
命名规范：handle + 名称（可选）+ 动词

js 复制代码

<template>
  <div
    @click.native.stop="handleItemClick()"
    @mouseenter.native.stop="handleItemHover()">
  </div>
</template>

<script>

export default {
  methods: {
    handleItemClick () {
      //...
    },
    handleItemHover () {
      //...
    }
  }
}
</script>

五、CSS常用命名汇总

1. 页面结构

容器: container

页头：header

内容：content

导航：nav

横向的导航栏：navbar

菜单：menu

页面主体：main

侧栏：sidebar

页尾：footer

栏目：column

页面外围控制整体布局宽度：wrapper

某一小块元素功能包在一起的一个外围包：wrap

左右中：left right center

2. 导航

导航：nav

主导航：mainbav

子导航：subnav

顶导航：topnav

边导航：sidebar

左导航：leftsidebar

右导航：rightsidebar

菜单：menu

子菜单：submenu

下拉：drop

下拉菜单：dropmenu

标题：title

面包屑：breadcrumb

摘要: summary

3. 功能

标志：logo

轮播：banner

登陆：login

登录条：loginbar

搜索：search

标题：title

加入：joinus

状态：status

按钮：btn

滚动：scroll

标签页：tab

文章列表：list

工具条：tool|toolbar

提示信息：msg

当前的：current

小技巧：tips

图标：icon

注释：note

指南：guild

服务：service

热点：hot

新闻：news

下载：download

投票：vote

合作伙伴：partner

友情链接：link

版权：copyright

4. css文件命名

index.css // 一般用于首页建立样式

head.css // 头部样式，当多个页面头部设计风格相同时使用。

base.css // 共用样式。

global.css // 页面样式基础，全局公用样式，页面中必须包含。

style.css // 独立页面所使用的样式文件。

reset.css // 重置样式

layout.css // 布局、版面样式，公用类型较多时使用，一般用在首页级页面和产品类页面中

module.css // 模块，用于产品类页，也可与其它样式配合使用。

master.css // 主要的样式表

columns.css // 专栏样式

themes.css // 主体样式

forms.css // 表单样式

mend.css // 补丁，基于以上样式进行的私有化修补。

print.css // 打印