# wang-ui

**Repository Path**: wangfayu/wang-ui

## Basic Information

- **Project Name**: wang-ui
- **Description**: 小王组件库，整理自己开发的组件，方便后续快速布局或者样式获取
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-18
- **Last Updated**: 2025-07-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# wang-ui 组件库

一个基于 Vue 3 的高质量 UI 组件库，助力高效开发。

## 📁 目录结构

```
wang-ui/
├── index.js                # 组件库入口
├── package.json            # 项目配置
├── vite.config.js          # Vite 构建配置
├── packages/               # 组件源码目录
│   └── Button/
│       ├── Button.vue      # Button 组件实现
│       └── index.js        # Button 组件导出
├── docs/                   # 文档站目录（VitePress）
│   ├── index.md            # 文档首页
│   ├── contributing.md     # 贡献指南
│   ├── components/         # 组件文档
│   │   └── Button.md       # Button 组件文档
│   ├── playground/         # 组件预览
│   │   ├── index.md        # 预览入口
│   │   └── PlaygroundDemo.vue # 预览示例
│   └── .vitepress/
│       └── config.js       # VitePress 配置
```

## 🚀 安装与使用

### 安装
```bash
npm install wang-ui
```

### 全量引入
```js
import { createApp } from 'vue';
import App from './App.vue';
import WangUI from 'wang-ui';
import 'wang-ui/dist/style.css';

const app = createApp(App);
app.use(WangUI);
app.mount('#app');
```

### 按需引入
```js
import { Button } from 'wang-ui';
// ...
```

## 📚 文档与组件

本项目使用 [VitePress](https://vitepress.dev/) 搭建文档站，包含：
- 组件用法与 API 说明
- 贡献指南
- 组件预览

启动文档开发环境：
```bash
npm run dev:docs
```
访问 http://localhost:5173 查看文档站。

## 🧩 组件预览（Playground）

在文档站导航栏点击“组件预览”，可实时体验和交互 wang-ui 组件。

- 示例文件：`docs/playground/PlaygroundDemo.vue`
- 入口文档：`docs/playground/index.md`

## 🛠️ 贡献指南

欢迎参与 wang-ui 组件库开发！

1. Fork 本仓库
2. 新建分支进行开发
3. 提交 Pull Request

详细说明见 `docs/contributing.md`

## ⚙️ 构建与依赖

- 构建工具：Vite
- 文档工具：VitePress
- 依赖：Vue 3.x

### 主要脚本
```json
"scripts": {
  "dev:docs": "vitepress dev docs",      // 启动文档开发环境
  "build:docs": "vitepress build docs",  // 构建文档站
  "serve:docs": "vitepress serve docs"   // 预览构建后的文档站
}
```

---

如需了解更多组件用法、开发规范和贡献方式，请访问文档站首页。