joywise-package v1.0.3

组件脚手架

脚手架功能说明

• 组件开发

  需要在脚手架中完成组件开发，组件测试，组件打包发布等功能。

• 组件构建

  组件完成开发与测试后，需要进行构建并打包发布到内部 npm 上，构建打包过程涉及到类型定义的提取，不同模块化（至少包括 common JS 和 EMS）规范的打包等。

• 组件文档的编写与发布

  通常采用 markdown 进行组件文档的编写，文档需要包括：

  • 组件属性：props
  • 组件事件：events
  • 组件暴露方法：methods
  • 组件支持的插槽：slots
  • 组件对应的示例代码
  • Demo 展示

• 组件打包构建

  相关打包流程见 脚手架使用说明。

• 组件库示例文档（非必须）

  如果内部开发的组件具有相关性（尤其是 UI 相关的组件），可以参考 element-plus 官方文档，利用 vitepress 提供示例站点，并部署在内部系统上。针对 UI 类组件库，有如下好处：

  • 演示站点，展示组件的实现效果，团队内非组件开发人员也能根据演示站点快速上手；
  • 业务驱动的组件开发，经常会根据需求不断迭代，在编写示例文档的过程中，可以对相关组件进行优化与重构。

组件开发流程

• 组件设计文档

  在团队开发需求中，我们经常会遇到类似的业务开发场景。通常需要将具体的业务组件抽离并封装成通用组件。可以参考 通用组件设计文档。

• 组件示例文档

  在开发组件的同时，需要提供对应的组件说明文档。脚手架目录 packages 提供了一个组件库用例，对应的示例组件 packages/avatar。 示例组件的说明文档可以参考 示例组件文档。

• 组件测试

  脚手架目录 example 提供了一个由 vite 生成的 Vue3 + ts 工程。example/src/App.vue 为测试组件的入口，在 App.vue 中引用组件并测试，依次运行命令：

  cd example
  npm install
  npm run dev

• 组件 demo

  开发测试完成的组件，需要提供 demo 文档，参考 示例组件的参考文档。

• 组件打包构建

  相关打包流程见 脚手架使用说明。