9960 有始有终小组项目开发文档

一、选题

组件库设计

二、需求分析

1.功能需求

1.1 组件分类：根据组件的功能和复用性，将组件分为基础型、布局型、表单型等。

在尽可能的多实现组件功能的全面性和有限时间内的高效率开发，我们选用了Button、Icon等基础组件，大部分ivew中的布局组件和form表单、日期选择器DatePicker等表单型组件作为开发的主要内容。

1.2 组件交互：设计合理的props、events、slots等接口，实现组件之间的数据传递和事件触发。

在交互方面，为了实现组件封装后的数据传递，我们尽可能的通过defineProps实现组件的props参数传递，以实现组件的基本展示效果；在Button、Page等交互组件上，通过events事件实现；在复杂组件上通过slots插槽实现组件的复用和嵌套。

1.3 组件开发：使用Vue.js + TS技术栈，结合vue-cli、npm workspace等工具，实现多包管理、版本控制等功能。

在项目搭建时，需要对组件库可发布、发布规则要明确、发布后样式文件如何导入、单个组件开发流程的规范等功能做详细的约束。

1.4 组件测试：编写单元测试代码，保证组件的质量和稳定性。

1.5 组件文档：在本项目的目前开发阶段中，使用了.md文档来实现组件文档的展示页，并编写清晰易懂的文档说明和示例代码。

在组件的文档展示页，除了基本的页面展示外，还需要考虑页面的加载方式、是否因为script过多导致项目加载过慢等优化问题。

1.6 组件样式：使用CSS预处理器（Scss）和CSS变量来编写可配置和可维护的样式代码。

使用css样式时，如何规范样式的选择、预处理器的全局注册和使用、变量如何统一化定义，都是组件样式方面需要解决的问题。

2. 非功能需求（组件库的样式风格问题）

为了在短时间内实现好的展示效果，仿照现有组件库的样式、展示页布局是必要的，这样在减少了开发负担的同时，可以有更多的时间和精力投入到具体的功能实现模块。

三、系统设计

1. UI设计

在短时间内实现组件库的开发，UI设计势必需要引入现有组件库的设计风格，本组在讨论后选取ivew的组件基本样式和展示页基本布局作为本项目的基本设计思路。

2. 实现方案

2.1 初期（项目选择和风格统一）

在1月中旬刚开始青训营课程时，本组完成组队后即确认了要选取组件库作为开发内容，经过在飞书群组的讨论，确定了以Vue3+TypeScript+Vite+Scss的基本技术栈框架。组长基于需求分析中的组件开发需求搭建了项目的基本框架，可以完成组件的单个开发、源代码查看、打包发布等功能。

在此后，项目组通过讨论确定了开发的基本流程，每个人先对一个基础组件（Button）进行独自开发，完成后通过飞书会议的形式进行组件样式、命名规则、文件架构等亟需统一的内容做了讨论。在确定风格后，将ivew中的大部分布局组件和常用的表单组件做了分工，每个人领取自己感兴趣的内容，并规划了个人任务的提交时间并进行个人展示。

2.2 中期（个人组件任务的开发）

在确定了每个人的开发任务后，每个人在既定的组件开发风格下完成各自的组件开发任务，有问题在飞书群组及时反馈，由组长和钱文浩、郭可欣负责GitHub的项目的代码preview和Pull Request等工作。

2.3 后期（展示页的完善和组件功能的测试）

在交付了自己的组件任务后，组员还需要将展示页完善，将开发好的组件使用在展示页中，比如将使用封装好的菜单组件完成左侧的菜单页，使用封装好的卡片组件完成中间的组件展示和源代码查看，在展示页的下部统一加上全局页脚等。这一步既是完善先前未完成的工作，也是对组件功能进行的测试。

3. 技术选型

3.1 前端部分

• 框架：Vue3（https://v3.cn.vuejs.org/guide/introduction.html）

• 语言：

  • TypeScript（https://www.tslang.cn/docs/home.html）
  • JavaScript

• 构建工具：Vite（https://vitejs.cn/guide/）

• 包管理工具：pnpm（https://www.pnpm.cn/）

• 图标库：

  • Iconify：https://icon-sets.iconify.design/（首选其中的 Icon Park 库，字节的）
  • unplugin-icons 插件：https://github.com/antfu/unplugin-icons

• 路由管理：Vue Router（https://router.vuejs.org/zh/introduction.html）

• 状态管理：Pinia（官方英文文档：https://pinia.vuejs.org/introduction.html，第三方中文文档：https://blog.csdn.net/qq_28550263/article/details/120721160）

• 网络请求：axios（http://www.axios-js.com/zh-cn/docs/）

• 工具库：VueUse（可选，其它的也可以，https://vueuse.org/guide/）

四、计划及分工

1. 开发计划

视具体情况动态调整进度

第一阶段（截止到 1.21）：

• 组长搭建好项目的初始工作
• 发布任务对Button组件进行独自开发，并规定好DDL以进行风格统一
• 分发组件开发任务，每个人领取自己的任务

第二阶段（截止到 2.6）：

• 完成自己所属任务的组件编写
• 完善公共部分的代码编写，如源代码查看、Scss样式预处理的全局使用和变量命名

第三阶段（截止到项目DDL）：

• 将开发好的组件利用在各自组件任务的展示页，包括组件样例展示、代码查看功能、组件API介绍等内容
• 编写组件测试用例，完善组件开发流程 五、测试 六、附录

1. 编码规范 参考 Vue 的风格指南：https://v3.cn.vuejs.org/style-guide/
2. Git 提交规范 参考 https://segmentfault.com/a/1190000022780410