前端规范文档

# 简介

针对于管理系统这种类型系统开发，我们总结了一套非常清晰有效的文件(文件夹)命名方式，使用规范的命名方式将大幅提高开发效率。

# 基本规范

# 第一步

例子

我们以实际场景来介绍一下相关命名规范，我们可以看到一共有 3 个大模块，分别为 权限管理,组织管理,系统通知。

  1. 权限管理 => 账号管理 和 角色管理
  2. 组织管理 => 人员管理 和 组织机构管理
  3. 系统通知 => 公告管理

在进行文件夹划分的时候，最小基本单位为 账号管理 而不是 权限管理，这里存在3个大模块但实际我们会创建 5个目录分别为a,b,c,d,e。

└─pages     //外层目录
    ├─a     //文件夹a，代表账号管理模块
    ├─b     //文件夹b，代表角色管理模块
    ├─c     //文件夹c，代表人员管理模块
    ├─d     //文件夹d，代表组织机构管理模块
    ├─e     //文件夹e，代表公告管理模块
1
2
3
4
5
6

TIP

文件夹的顺序并没有任何规定，开发过程中依次按照顺序命名即可，上诉例子中，文件夹a也可以代表角色管理模块，这个只取决于你编码时候先书写哪个模块。

# 第二步

文件夹书写完以后我们再来看看每个文件夹里面文件应该怎么命名。文件夹里面命名稍微复杂一点，我们将分情况介绍。

# 表格 + 弹窗

例子

这是一个比较简单的页面，一共有 3 个操作分别为 新增角色 修改 删除，这三个操作都不需要跳转页面，点击这些按钮都是弹窗进行处理。

└─pages             //外层目录
    ├─a
    ├─b  //文件夹b，代表角色管理模块
    │  ├─dialog
    │  │    ├─b-add.vue //新增弹窗
    │  │    │  
    │  │    │─b-eidt.vue //编辑弹窗
    │  │    │     
    │  └─b.vue //列表展示界面
    ├─c
    ├─d
1
2
3
4
5
6
7
8
9
10
11

TIP

  1. 所有弹窗都应该存放于dialog目录，这个目录名称不允许改变。
  2. 对于常见的业务操作，我们的命名都遵守 目录名称 + 操作名称，在本例中目录名称为 b，操作名称有 view(列表，查看),add(新增),edit(编辑),delete(删除)。
  3. 如果弹窗内容过于复杂，也可以在外层包裹一个文件夹， 比如 b-add.vue外层可以包裹一个 b-add目录，名字必须保持一致。

# 表格 + tabs切换 + 弹窗 + 页面跳转

例子

这是一个较为复杂的页面，一共有 3 个操作分别为 新增计划 修改计划 查看计划，这三个操作都会跳转到独立的页面，同时表格也存在4个不同的状态，这4种不同的状态对应着表格的不同操作。

└─pages             //外层目录
    ├─a
    ├─b  
    ├─c             //文件夹c，代表我的计划模块
    │  ├─tab-a      //我制定的计划
    │  │   │  
    │  │   ├─add    //我制定的计划-新增计划
    │  │   │  ├─components //新增计划模块里面的子组件，
    │  │   │  │             //例如：计划基本信息是一个基础组件，需要从add.vue中剥离，单独写在components目录下面
    │  │   │  │  ├─info.vue //计划基本信息(add.vue的子组件)
    │  │   │  │  └─task.vue //任务基本信息(add.vue的子组件)
    │  │   │  │
    │  │   │  │─dialog    //表格中存在弹窗则弹窗写在当前目录，例如：新增计划里面有预览pdf报告是一个弹窗则写在这个文件里面
    │  │   │  │─add.vue  //新增计划模块
    │  │   │  │
    │  │   ├─edit    //我制定的计划-修改计划(同新增页面)
    │  │   │  
    │  │   └─view    //我制定的计划-查看计划(同新增页面)
    │  │        └─view.vue
    │  │       
    │  ├─tab-b      //我审批的计划      
    │  ├─tab-c      //全部计划      
    │  ├─tab-d      //计划调整      
    │  │       
    │  └─c.vue //列表展示界面(包含搜索条件 + 不同状态组件)
    ├─d
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

我们来看看 c.vue 文件应该如何书写

<template>
    <div>
        <!-- 搜索条件 -->
        <s-search showTip autoRequest @change="handleChange">
            <s-search-item label="账号名" vModel="name"></s-search-item>
            <el-button slot="operation" type="success" size="mini">新建</el-button>
        </s-search>
        <!-- tabs切换 -->
        <el-tabs v-model="activeName">
            <el-tab-pane label="我制定的计划" name="s-a"></el-tab-pane>
            <el-tab-pane label="我审批的计划" name="s-b"> </el-tab-pane>
            <el-tab-pane label="全部计划" name="s-c"> </el-tab-pane>
            <el-tab-pane label="计划调整" name="s-d"> </el-tab-pane>
        </el-tabs>
        <!-- 表格展示 -->
        <components :is="activeName"></components>
    </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

TIP

  1. 所有弹窗都应该存放于dialog目录，这个目录名称不允许改变。
  2. 拆分出来的子组件应该存放于components目录。

# 总结

  1. 弹窗存放目录 dialog
  2. 子组件存放目录 components
  3. 下转页面存放目录 children
  4. 典型业务场景命名 模块名称 + add,edit,view,delete
  5. 过长的文件名称需要用 -(短横线)连接，禁止出现驼峰，下划线等命名方式

TIP

文件目录规范只是起一个参考作用，实际的命名规范可灵活制定，这套命名规范也是从实际业务中提炼出来具备一定的参考意义。

← 文件相关 →