%20(2).svg)
项目简介
本项目是基于Rollup打包工具和Vue框架构建的模块化UI组件库。项目里每个组件为独立的包，开发者能按需单独安装和使用。借助Rollup进行打包优化，结合Vue的组件化开发模式，提供了高效、可维护且可重用的UI组件解决方案，还配有完善的单元测试保障组件稳定性和质量。
项目的主要特性和功能
- 模块化设计：组件独立成包，支持按需安装使用，可减小项目体积。
- Rollup打包：利用Rollup高效打包和优化代码，支持ES模块与CommonJS模块输出。
- Vue框架：基于Vue开发，发挥其响应式特性和组件化思想，提高开发效率。
- 单元测试：运用Jest和Vue Test Utils开展单元测试，保证组件功能和质量。
- CSS处理：通过Rollup插件处理CSS，支持动态注入和提取，实现灵活的样式管理。
- Babel支持：配置Babel，确保代码在多种浏览器和环境中正常运行。
安装使用步骤
1. 复制项目并安装依赖
bash
cd your-repo-name
yarn install # 或者使用 npm install 安装依赖
2. 安装测试依赖（可选）
若需运行单元测试，可安装测试相关依赖：
bash
yarn add jest @vue/test-utils vue-jest babel-jest -D
3. 配置项目（可选）
项目已包含基本的Babel和Jest配置，如需自定义，可修改以下文件：
- babel.config.js：配置Babel转译规则。
- jest.config.js：配置Jest测试环境。
4. 构建组件库
项目使用Rollup打包，可通过以下命令构建所有组件：
bash
yarn build
若只想构建特定组件（如lg-button），可使用：
bash
yarn workspace lg-button run build
5. 使用组件
构建完成后，组件库会生成在packages目录下的各组件文件夹中。可按以下方式安装和使用组件：
bash
yarn add lg-button # 以lg-button组件为例
然后在Vue项目中引入并使用该组件：
```javascript
import LgButton from 'lg-button';
export default { components: { LgButton } } ```
6. 运行单元测试（可选）
若已安装测试依赖，可通过以下命令运行单元测试：
bash
yarn test
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】