爱集微组件库规范
介绍
爱集微的组件库分为两个部分，分别负责 C 端和 B 端的应用。下面将分别介绍这两个部分的特点。
- React+TS+Material UI 组件库
React+TS+Material UI 组件库是一个用于构建现代化 C 端应用程序的 UI 组件库。它基于 React 框架和 TypeScript 语言进行开发，同时集成了 Storybook 和 Material UI 等技术，以提供更好的开发体验和更高的可定制性。该组件库可以用于 PC 和 H5 等不同平台，同时使用了 Tailwind CSS 来实现样式的自定义和扩展。我们还使用了 Monorepo 架构、PNPM 和 Lerna 等工具，以提高代码复用性和可维护性。
以下是我们的 C 端组件库和其它技术的一些特点和优势：
- 基于 React 框架和 TypeScript 语言，具有高度的可重用性、可维护性和可读性。
- 集成了 Storybook，可以快速地创建和展示 UI 组件的文档和示例。
- 集成了 Material UI，可以提供现代化的外观和用户体验，并提供了丰富的组件和实用工具。
- 集成了 Tailwind CSS，可以快速地实现样式的自定义和扩展。
- 支持 PC 和 H5 等不同平台，可以快速地构建出现代化的 C 端应用程序。
- 使用 Monorepo 架构管理多个项目和包，提高代码复用性和可维护性。
- 使用 PNPM 作为依赖管理工具，可以提高依赖安装和更新的速度。
- 使用 Lerna 作为代码库管理工具，可以轻松地管理多个项目和包，并实现版本控制等功能。
- 提供了清晰的 API 文档和示例代码，方便开发人员使用和学习。
通过使用我们的 C 端组件库，您可以快速地构建出现代化的 C 端应用程序，并享受 Material UI、Storybook 和 Tailwind CSS 等技术所提供的优秀开发体验和可定制性。同时，使用 Monorepo 架构、PNPM 和 Lerna 等工具，可以提高代码复用性和可维护性，从而进一步提高开发效率和代码质量。该组件库还支持 PC 和 H5 等不同平台，可以适应不同的应用场景。
- Vue3+JS+Element UI Plus 组件库
Vue3+JS+Element UI Plus 的 B 端组件库是一个用于构建 B 端应用程序的 UI 组件库，它基于 Vue3 框架和 JavaScript 语言进行开发，同时集成了 Element UI Plus 和 Storybook，以提供更好的开发体验和更高的可定制性。该组件库包含了丰富的组件，如表格、表单、对话框、导航等，可以快速地构建出一个现代化的 B 端应用程序。同时，我们使用了 Monorepo 架构、PNPM 和 Lerna 等工具，以提高代码复用性和可维护性。
以下是我们的 B 端组件库和其它技术的一些特点和优势：
- 基于 Vue3 框架和 JavaScript 语言，具有高度的可重用性、可维护性和可读性。
- 集成了 Element UI Plus，可以提供丰富的组件和实用工具，并支持多语言国际化。
- 集成了 Storybook，可以快速地创建和展示 UI 组件的文档和示例。
- 包含了丰富的组件，可以满足大多数 B 端应用程序的需求。
- 使用 Monorepo 架构管理多个项目和包，提高代码复用性和可维护性。
- 使用 PNPM 作为依赖管理工具，可以提高依赖安装和更新的速度。
- 使用 Lerna 作为代码库管理工具，可以轻松地管理多个项目和包，并实现版本控制等功能。
- 提供了清晰的 API 文档和示例代码，方便开发人员使用和学习。
通过使用我们的 B 端组件库，您可以快速地构建出现代化的 B 端应用程序，并享受 Element UI Plus 和 Storybook 所提供的优秀开发体验和可定制性。同时，使用 Monorepo 架构、PNPM 和 Lerna 等工具，可以提高代码复用性和可维护性，从而进一步提高开发效率和代码质量。
工作目录
├── .storybook
│ ├── main.js # storybook 配置文件
│ ├── manager.js # storybook 配置文件
│ ├── preview-head.html # storybook 配置文件
│ ├── preview.js # storybook 配置文件
│ └── ...
├── examples # 项目示例
│ ├── webpack-cli # webpack-cli 示例
│ ├── ...
├── packages # 包目录
│ ├── pkg-A # 包文件夹
│ │ ├── node_modules # 包依赖
│ │ ├── src # 包源码
│ │ ├── CHANGELOG.md # 包更新日志
│ │ ├── index.d.ts # 包类型声明 (vue3 组件库不需要)
│ │ ├── package.json # 包配置文件
│ │ ├── pnpm-lock.yaml # 包依赖锁定文件
│ │ ├── README.md # 包说明文档
│ │ ├── tsconfig.json # 包 ts 配置文件 (vue3 组件库不需要)
│ │ └── ...
│ ├── pkg-B
│ │ └── ...
│ └── ...
├── public # storybook 静态资源
│ ├── mockServiceWorker.js # mock service worker
│ ├── favicon.ico # 组件库 favicon 图标
│ ├── tailwind-base.css # tailwind 基础样式
│ └── ...
├── scripts # 脚本目录
│ ├── config
│ │ ├── cache.sh
│ │ └── rm_modules.sh
│ ├── ...
├── stories # storybook 组件库文档
│ ├── mdx # mdx 文档
│ │ ├── Introduction.stories.mdx # 组件库介绍
│ │ └── ...
│ ├── common # 公共组件文档
│ │ ├── Components.stories.tsx # 公共组件文档
│ │ └── ...
│ ├── libs name # 业务组件库文档
│ │ ├── Components.stories.tsx # 业务组件库文档
│ └── └── ...
├── .npmrc # npm 配置文件
├── .swcrc # swc 配置文件 storybook webpack build
├── lerna.json # lerna 配置文件
├── package.json # 项目配置文件
├── pnpm-workspace.yaml # pnpm 配置文件
├── postcss.config.js # postcss 配置文件
├── tsconfig.json # ts 配置文件 react组件库
├── README.md # 项目说明文档
├── tailwind.config.js # tailwind 配置文件 react组件库
└── jsconfig.json # js 配置文件 vue3组件库
代码规范
创建包
peerDependencies
storybook 文档 Docs
storybook 视图 Canvas
调试组件
三种