前端开发规范 (vue)

基本规范

1. 遵守vue的组件化规则
2. 严格遵守数据驱动原则
3. 命名规范
   1. 首要原则 : 语义化 , 命名要浅显易懂 , 尽量使用英文翻译
   2. 文件 , 文件夹 : 不允许使用横杠等有歧义的字符命名文件或者文件夹
   3. 尽量采用 大驼峰 , 小驼峰

基本项目逻辑 (仅前端)

1. 登陆 -> 获取该人员拥有的角色等 (将token值 , 角色数组 , 用户基本信息等存入缓存 cookies或者localstorage)
2. 切换角色 -> 没有选择角色不允许进入系统 , 选择角色后得到权限数组(作为功能和按钮权限的依据) , 以及新的消息数(更新展示)
3. 进入模块 -> 切换页面 得到初始化数据或者列表数据 (具体参照接口文档中的业务逻辑)
4. 产生数据 -> 新增 修改 删除 操作

技术架构 (不存在的文件夹自行新建)

1. 基础配置层 该层影响全局 , 将各个组件或者页面中的有可能会改变的全局配置放入此处 config
   1. 环境变量 config (负责测试和上线正常打包的 不同基本变量)
   2. 路由配置
   3. 组件配置 特殊的具有配置的组件
2. 中间层 该层负责与后端API进行交互 API (Data)
3. 页面层 该层负责调用元素组件进行页面展示 Pages(Views)
4. 元素层 该层负责一个细小的功能点细节实现 Bimcc (Components) 分为通用组件 (Components) 与页面专用组件 (页面文件夹以内)
5. 方法层 该层负责抽象通用方法 , 避免重复造轮子 (Libs)

数据流向

开发过程中一定要对数据流向有清晰的认识 , vue中一切都是用数据来驱动的

架构名称	流出方向	流入方向
后端API	获取数据包(GET)	接收操作(POST,PUT,DELETE)
前端中间层	组件引入调用(call)	组件引入调用(call)向后端发送请求
页面组件	传入元素组件(props),调用中间层(call)	从元素组件获取(@change),从中间件获取(call)
元素组件	$emit('change',data)	从页面组件得到(props),从中间层获取(call)

[外链图片转存失败(img-SbPxF990-1567586469854)(…/…/assets/images/dataflow.png “数据流向图”)]

组件开发规范

首先 , 组件的定义并不是仅仅只有vue拆分出来的组件 , 一个架构分层可以当做一个组件 , 一个页面可以当做一个组件 , 一个请求也可以当做一个组件 , 甚至我们整个系统也是一个组件

其次 , 组件应当尽量简化其职责 , 并同时考虑到外部调用的简化 , 尽量不要把几个功能封装到同一个组件中 ,组件相对于其父级应该只有唯一的职责

1. 所有组件**不得出现直接访问API**的代码!!! 只能从中间层进行调用
2. 在拿到一个功能页面或者模块的时候首先进行其逻辑分析 , 组件拆分分析 , 不允许出现写到一半再来拆分组件 ( 为了保持这一个功能逻辑的连续性 )
3. 组件拆分分析完成后从 最小的组件 开始往上写
4. 组件编写时请记住该组件的数据流向 , 这是最重要的逻辑依据 ( 数据驱动 )
5. 拆分组件时分为通用组件及专用组件 , 通用组件放到专门的文件夹中 , 不得随意修改 , 有修改后请通知其他同事
6. 所有的通用组件必须要写组件文档
7. 表单组件必须考虑其 数据回显 , 同页面复用

页面组件

1. 不得出现臃肿的页面组件文件 (臃肿说明没有拆分好组件)
2. data 和 method 等属性过于臃肿可以独立出来当做该页面的专用组件 (它们也是组件)
3. 拆分组件时将本页面组件写作一个文件夹

元素组件

1. 选择类的组件考虑其数据来源 及 数据回显 及 输入输出数据同步
2. 通用类元素组件可以看做一个黑箱 , 我只管输入以及输出 , 其它均在组件内解决
3. 元素组件通常要从后端返回的数据格式开始考虑如何封装 ( 特别是在选择类的组件后端没有给出明确的已选项时 )

模块开发基本流程

1. 建路由(权限) (对应后端模块权限)
2. 完成中间层与api的交互对接
3. 建页面 (开始分析组件拆分等)
4. 写组件
5. 建列表 ( table 组件 获取 api数据)
6. 建表单(组件引用)
7. 测试 ( 整体功能测试 )
8. 结束