组件库开发指南与规范

前言

组件库fork自element-plus。开发语言为vue3和typescript，内部添加了一些自定义的组件，并且封装了一些区块组件，并不包含业务组件。

开发规范已element-plus的为基准，但鉴于element项目开发周期较短，甚至代码内部有些已定义未使用的代码，所以在借鉴其他优秀组件库如antd和开源项目的基础上，制定本指南和规范，并尽量使开发体验与业务项目保持一致。

因组件库的特殊性，架构设计与平时业务项目区别很大，故对组件库的设计进行一个介绍及指南。

开发指南

步骤如下

​ 以caption为例

1. 运行script下的 gc.sh自动在package下新建组件文件夹
2. 在packages/theme-chalk下添加组件scss文件，如captions.scss
3. 在packages/theme-chalk/index.scss内引入上述scss
4. 在packages/han-ui-next/index内引入并注册组件
5. 在packages/han-ui-next/package.json内引入组件依赖
6. 运行yarn bootstrap将新组件引入依赖
7. 运行yarn run website-dev:play 打开模拟测试环境并将代码调试完成
8. 在组件文件夹下的tests下完善测试用例
9. 在website/docs下新建md文件，如caption.md
10. 在nav.config.json内配置上述md文件
11. 运行yarn run website-dev跑起来文档网站
12. 在上述md文件中，完善文档、测试功能。
13. 在vetur下配置vetur自动提示
14. 运行yarn run build打包组件库

如果想了解具体架构，请看下面的章节。不了解也不影响开发。

element源码架构设计

使用的库

rollup

通俗的讲用于打包JavaScript，可以把js多个js文件合并为一个大的文件，并且在这个过程中，可以通过插件进行处理Typescript、提取css等。文档点此，开发ui库入门点此。element-plus用rollup打包 组件bundle

webpack

基础-略

gulp

基于node的自动化构建工具，主要就是用于任务自动化，基于stream，可以使用各种插件处理文件。

组件库用于样式文件和字体图标，hanui第一版也使用了用于将css色值处理为css变量。

lerna

把代码库组织成多包储存库，组件库内各个组件都是一个单独的包，都有自己的package.json。主要为了按需引用。我们自己的业务项目也有使用，为了解决多地区与基础产品的组织问题。

目录解析

• build：打包相关

  • bincomp：扫描packages下所有的包运行build.component.js打包为ems格式
  • build-locale：用于国际化
  • build-util：rollup打包工具，供sh脚本使用
  • build.component：rollup打包组件为bundle
  • build.comps：对打包的组件修改名称，供sh脚本使用
  • build.entry：打包入口，供sh脚本使用
  • build：定义基础的rollup打包方法
  • common：略
  • gen-type：通过node的fs把组件库内部定义的typescript类型文件拷贝到打包后的库
  • gen-version：略
  • getCpus：略
  • getPkgs：略
  • rollup.config.bundle：打包packages/element-plus/index.ts
  • rollup.config：没发现被使用
  • webpack.config：TODO

• packages：组件与样式

• sripts：sh脚本

  • build：下载依赖并打包
  • gc：自动在packages新建标准的组件
  • pulish：提交脚本
  • update-versions：略

• typings：定义了全局的类型

• vetur：给vetur提供了自动提示

• website：文档项目

  • demo-styles：md内的demo需要的样式
  • docs
    • zh-CN：这里写md文档
  • play：在此可以随意测试，已经自动导入所有组件

build时发生了什么

yarn bootstrap
yarn clean:lib
yarn build:esm-bundle
yarn build:lib
yarn build:lib-full
yarn build:esm
yarn build:utils
yarn build:locale
yarn build:locale-umd
yarn build:theme

formcreate指南

打包命令为yarn run build:form