作者：UOrb
声明：文章为稀土技能社区首发签约文章，14天内制止转载，14天后未获授权制止转载，侵权必究！
前语
技能计划规划 其实便是对 产品需求 转换到 技能需求 的一个转化过程（至少关于开发我是这么理解的），同时也是 了解 业务需求和逻辑的一种手段，在编写技能计划的时候，你会发现一些 不明确 的问题，这个时候就能够 提早 和 产品、后端、规划 进行交流，提早 处理 问题，防止在开发途中才发现问题要进行 返工 操作。
其次便是根据原型图或规划图对 页面结构 进行划分，提早 规划 好组件模块的划分边界，以及那些功用模块或组件能够复用的，页面上有哪些功用，功用与功用之间的 关联关系 是怎么样的等等。
同时技能文档能够让你对需求的工作量把控的相对精确一些，对项目的周期、工作的排期、是否需要请求加班等业务也能够提早进行组织和处理。
项目布景
这儿大部分都是从 需求文档 中的引证，所以就不再重写了。
此处省掉一万个字…
技能选型
前端框架运用 Vue3，最先开端考虑的是运用 React，目前工作中运用 Vue ，开源中运用 React ，能够形成互补，让自己对目前主流的两大框架都不陌生，可是计划赶不上改变，由于我对 Vue 更了解，相对的进度就会更快一点，而且我也计划把这个作为一个实战的分享使用使用到公司中，而且预备加点 Vue3 源码方面的内容。
构建东西运用 Vite，飞一般的感觉，特别是你同时开发两个项目，一个是 Vite 一个是 Webpack ，Webpack 的构建会让你感到捉急（别问，问便是微前端，目前市面上的微前端架构对除了 Webpack 以外的构建东西都不太友好）。
富文本修正器运用 wangEditor5 ，国内一流的富文本修正器，简洁易用，功用强大，开箱即用没有心智负担（绝对没有夹带私货 god）。
功用需求
对产品需求的梳理，结合原型或规划图转换成技能需求，如果有相对中心或困难的功用，主张 单独编写 技能计划规划文档，中心实现部分也主张运用 伪代码 的方式预先规划。
登陆
功用列表
- 用户登陆弹框
- 表单字段
- 账号
- 校验
- 最小长度为 6
- 没有特别字符
- 数字不能作为第一位
- 校验
- 暗码
- 校验
- 最小长度为 6
- 没有特别字符
- 数字不能作为第一位
- 校验
- 账号
- 功用操作
- 登陆
- 登陆失败运用大局提示框进行提示
- 登陆成功后主动跳转到个人中心页面
- 注册
- 切到注册弹框
- 登陆
- 表单字段
- 用户注册弹框
- 表单字段
- 用户名
- 校验
- 没有特别字符
- 校验
- 帐号
- 校验
- 最小长度为 6
- 没有特别字符
- 数字不能作为第一位
- 校验
- 暗码
– 校验
- 最小长度为 6
- 没有特别字符
- 数字不能作为第一位
- 用户名
- 操作功用
- 注册
- 注册失败运用大局提示框进行提示
- 注册成功后主动跳转到个人中心页面
- 直接登录
- 切换到登陆弹框
- 注册
- 表单字段
示意图
组件规划
- 容器组件
- 登陆模块
- 注册模块
触及接口
- 用户注册接口
- 用户登陆认证接口
个人中心
功用列表
- 顶部
- 查找框
- 功用按钮
- 新增空间
- 唤起新增空间弹框
- 新增空间
- 用户信息
- 菜单栏
- 菜单列表
- 最近阅读
- 跳转至阅读记载页面
- 我的空间
- 当时用户的空间列表
- 跳转至空间页面
- 当时用户的空间列表
- 回收站
- 跳转至回收站页面
- 最近阅读
- 空间页面
- 标题
- 标签页
- 知识库
- 知识库面板
- 知识库称号
- 最近修正文件列表 – 最多 3 个
- 功用菜单
- 修正知识库
- 知识库面板
- 设置
- 空间根底设置修正表单
- 表单字段
- 称号
- 简介
- 表单字段
- 功用按钮
- 更新
- 空间根底设置修正表单
- 知识库
- 知识库页面
- 标题
- 文件列表
- 展现字段 – 称号 – 最近更新时刻 – 操作栏
- 操作功用
- 打开文档
- 修正文档装备
- 删去文档
- 阅读记载页面
- 标题
- 查找
- 根据文件名
- 文件列表
- 展现字段
- 称号
- 操作人
- 所属知识库
- 所属空间
- 删去时刻
- 功用操作
- 打开文档
- 展现字段
- 回收站页面
- 标题
- 查找
- 根据文件名
- 文件列表
- 展现字段
- 称号
- 操作人
- 所属知识库
- 所属空间
- 删去时刻
- 操作栏
- 操作功用
- 康复
- 完全删去
- 展现字段
- 菜单列表
- 新增空间弹框
- 表单字段
- 称号
- 校验
- 不能为空
- 非特别字符
- 校验
- 简介
- 校验 – 不能为空 – 非特别字符
- 称号
- 功用操作
- 承认
- 提交当时表单并进入 loading 状况
- 提交成功后封闭弹框并进行更新空间列表和新增成功提示
- 撤销
- 封闭弹框并清空表单
- 承认
- 表单字段
- 新增/修正知识库弹框
- 表单字段
- 称号
- 校验
- 不能为空
- 非特别字符
- 校验
- 简介
- 校验
- 不能为空
- 非特别字符
- 校验
- 称号
- 功用操作
- 承认
- 提交当时表单并进入 loading 状况
- 提交成功后封闭弹框并进行更新知识库面板和新增成功提示
- 撤销
- 封闭弹框并清空表单
- 承认
- 表单字段
示意图
组件规划
- 容器组件
- 侧边栏
- 中心视图
- 空间
- 标题
- 标签页
- 知识库面板
- 知识库
- 标题
- 文档列表
- 阅读记载
- 标题
- 查找框
- 文档列表
- 标题
- 回收站
- 标题
- 查找框
- 文档列表
- 标题
- 空间
触及接口
用户信息获取接口 文档查询接口
获取用户空间列表接口 新增用户空间接口 修正指定空间接口 删去指定空间接口
获取指定空间的知识库列表接口 新增指定空间的知识库接口 修正指定知识库接口 删去指定知识库接口
获取指定知识库信息接口 修正指定知识库信息接口 获取指定知识库的文档列表接口 新增指定空间文档接口 修正指定文档装备接口 删去指定文档接口
获取用户阅读文档记载列表接口 新增文档接口 修正指定文档装备接口 删去指定文档接口
获取用户已删去列表接口 康复文档接口 直接删去接口
文档
功用列表
- 标题
- 文档根底信息展现
- 文档拉下操作
- 打印
- 删去
- 文档装备信息检查
- 字数统计
- 创立人
- 创立时刻
- 更新人
- 更新时刻
- 更新文档
- 富文本修正功用
- 标题
- 引证
- 加粗
- 下划线
- 斜体
- 删去线
- 代码块
- 字体颜色
- 字体大小
- 字体
- 布景颜色
- 行高
- 有序列表
- 无序列表
- 代理
- 对齐
- 缩进
- 超衔接
- 图片
- 表格
- 分割线
示意图
组件规划
- 容器组件
- 顶部文档信息
- 内容区域
- 东西栏
- 修正区域
触及接口
获取指定文档信息数据接口 修正/保存指定文档接口 修正指定文档装备接口
结尾
大多数情况下，前端的技能计划规划没有后端那么杂乱哈，满足小或许简略的项目，而且也不存在多人开发的情况下不写前端的技能计划规划其实也没有太大的影响，可是并不是说前端的技能计划就不重要了哈，不管是前端仍是后端的技能计划都是很重要的，而且越是杂乱度高的项目和多人、多团队协作的项目技能计划规划就越显得重要，只要提早承认好要走的方向，那么接下来的路就不那么难走了。
