CUI 组件库

✨ 特性

• 🚀 现代化技术栈: 基于 Vue 3 + TypeScript + Vite 构建
• 📦 开箱即用: 提供丰富的组件库，满足日常开发需求
• 🎨 主题定制: 支持主题定制，轻松适配不同设计风格
• 📱 响应式设计: 组件支持响应式布局，适配多种设备
• 🔧 TypeScript: 完整的 TypeScript 类型定义
• 🧪 单元测试: 使用 Vitest + Vue Test Utils 保证代码质量
• 📖 文档完善: 提供详细的组件文档和示例

🛠️ 技术栈

• 框架: Vue 3.0
• 构建工具: Vite
• 语言: TypeScript
• 状态管理: Pinia
• 路由: Vue Router
• UI 基础: Element Plus
• 样式: Tailwind CSS
• 测试: Vitest + Vue Test Utils

📦 安装

# 使用 npm
npm install cui

# 使用 yarn
yarn add cui

# 使用 pnpm
pnpm add cui

🚀 快速开始

完整引入

import { createApp } from "vue"
import CUI from "@cuixingjian/cui"
// 重要：必须导入样式文件，否则组件样式会丢失
import "@cuixingjian/cui/dist/index.css"

const app = createApp(App)
app.use(CUI)
app.mount("#app")

按需引入

import { createApp } from "vue"
import { Button, Icon } from "@cuixingjian/cui"
// 重要：按需引入时也需要导入样式文件
import "@cuixingjian/cui/dist/index.css"

const app = createApp(App)
app.use(Button)
app.use(Icon)
app.mount("#app")

在模板中使用

<template>
  <div>
    <cui-button type="primary">主要按钮</cui-button>
    <cui-icon name="home"></cui-icon>
  </div>
</template>

📋 组件列表

基础组件

• Button 按钮 - 常用的操作按钮
• Icon 图标 - 语义化的矢量图形

数据展示

• Carousel 走马灯 - 在有限空间内，循环播放同一类型的图片、文字等内容

导航组件

• Tree 树形控件 - 文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构

🔧 开发

环境要求

• Node.js >= 16
• pnpm >= 7

本地开发

# 克隆项目
git clone <repository-url>
cd c-ui2

# 安装依赖
pnpm install

# 启动开发环境
pnpm dev

# 启动文档站点
pnpm docs:dev

项目结构

c-ui2/
├── packages/           # 组件库源码
│   ├── components/     # 组件
│   ├── theme-chalk/    # 样式主题
│   └── utils/          # 工具函数
├── docs/              # 文档站点
├── play/              # 开发调试环境
└── typings/           # 类型定义

构建

# 构建组件库
pnpm build

# 构建文档
pnpm docs:build

📖 文档

访问我们的在线文档查看详细的组件 API 和使用示例。

🤝 贡献

我们欢迎所有的贡献。请阅读我们的贡献指南了解如何参与项目开发。

开发流程

1. Fork 本仓库
2. 创建你的特性分支 (git checkout -b feature/AmazingFeature)
3. 提交你的修改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开一个 Pull Request

📄 许可证

本项目基于 ISC 许可证开源。

👥 维护者

• @cuixingjian

🙏 致谢

感谢所有为这个项目做出贡献的开发者们！