# wmo-ui

**Repository Path**: wangmiao412704/wmo-ui

## Basic Information

- **Project Name**: wmo-ui
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-20
- **Last Updated**: 2026-05-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# wmo-ui

基于 Vue 3 的 UI 组件库，参考 Element Plus 设计规范。

## 安装

```bash
pnpm add wmo-ui
```

## 快速开始

```ts
// main.ts
import { createApp } from 'vue'
import WmoUI from 'wmo-ui'
import 'wmo-ui/dist/style.css'
import App from './App.vue'

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

按需导入：

```ts
import { WmoButton } from 'wmo-ui'
import 'wmo-ui/dist/style.css'
```

## 组件

### Button 按钮

```vue
<template>
  <WmoButton>默认按钮</WmoButton>
  <WmoButton type="primary">主要按钮</WmoButton>
  <WmoButton type="success">成功按钮</WmoButton>
  <WmoButton type="warning">警告按钮</WmoButton>
  <WmoButton type="danger">危险按钮</WmoButton>
  <WmoButton plain>朴素按钮</WmoButton>
  <WmoButton text>文字按钮</WmoButton>
  <WmoButton disabled>禁用按钮</WmoButton>
</template>

<script setup>
import { WmoButton } from 'wmo-ui'
</script>
```

**Props**

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| type | `'default' \| 'primary' \| 'success' \| 'warning' \| 'danger'` | `'default'` | 按钮类型 |
| plain | `boolean` | `false` | 朴素按钮 |
| text | `boolean` | `false` | 文字按钮 |
| disabled | `boolean` | `false` | 禁用状态 |

**Events**

| 事件名 | 说明 |
|--------|------|
| click | 点击按钮时触发 |

## 本地开发

```bash
# 安装依赖
pnpm install

# 启动开发预览
pnpm dev

# 构建组件库
pnpm build
```

## 设计规范

Design Tokens 定义在 `packages/wmo-ui/src/styles/variables.css`，包括颜色、字体、间距、圆角、阴影等，参考 Element Plus 设计体系。

## License

MIT