open-index/open-npm huggingface dataset:
npm package: @lsy5201314/lsy_ui
Description: 基于 Naive UI 二次封装的 Vue 3 UI 组件库，可以发布到 npm 使用。
Latest version: 0.1.1

# Lsy UI

基于 Naive UI 二次封装的 Vue 3 UI 组件库，可以发布到 npm 使用。

## 特性

- 📦 开箱即用的 Vue 3 组件
- 🎨 基于 Naive UI 的样式系统
- 🚀 完整的 TypeScript 类型支持
- 🔧 简单易用的 API 设计
- 📱 响应式设计

## 安装

```bash
npm install @lsy5201314/lsy_ui naive-ui @vicons/material
# 或
pnpm add @lsy5201314/lsy_ui naive-ui @vicons/material
# 或
yarn add @lsy5201314/lsy_ui naive-ui @vicons/material
```

## 使用

### 全局引入

```ts
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import LsyUI from '@lsy5201314/lsy_ui'
import '@lsy5201314/lsy_ui/style.css'

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

### 按需引入

```ts
// 导入组件
import { Button, Input, Card } from '@lsy5201314/lsy_ui'
// 导入样式
import '@lsy5201314/lsy_ui/style.css'

// 在组件中使用
components: {
  Button,
  Input,
  Card
}
```

## 组件列表

### Button 按钮

```vue
<Button>默认按钮</Button>
<Button type="primary">主要按钮</Button>
<Button type="success">成功按钮</Button>
<Button type="warning">警告按钮</Button>
<Button type="error">错误按钮</Button>
<Button type="info">信息按钮</Button>
<Button size="small">小按钮</Button>
<Button size="large">大按钮</Button>
<Button disabled>禁用按钮</Button>
<Button :loading="true">加载按钮</Button>
<Button circle>O</Button>
<Button ghost>幽灵按钮</Button>
<Button dashed>虚线按钮</Button>
```

### Input 输入框

```vue
<Input placeholder="请输入内容" />
<Input type="password" placeholder="请输入密码" />
<Input v-model="value" placeholder="双向绑定" />
<Input size="small" placeholder="小尺寸" />
<Input size="large" placeholder="大尺寸" />
<Input readonly placeholder="只读" />
<Input disabled placeholder="禁用" />
<Input maxlength="10" showWordLimit placeholder="带字数限制" />
```

### Card 卡片

```vue
<Card title="卡片标题">
  卡片内容
</Card>
<Card title="可关闭卡片" closable @close="handleClose">
  点击右上角关闭按钮可以关闭卡片
</Card>
<Card title="无边框卡片" :bordered="false">
  无边框样式的卡片
</Card>
<Card title="带额外内容的卡片">
  <template #header-extra>
    <Button size="small">操作</Button>
  </template>
  带额外内容的卡片
</Card>
```

## 开发

```bash
# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建组件库
npm run build:lib

# 预览构建结果
npm run preview

# 发布到 npm
npm run pub
```

## 开发说明

- 组件源码位于 `src/components/` 目录下
- 组件类型定义位于 `src/types/` 目录下
- 组件样式位于 `src/styles/` 目录下
- 演示页面位于 `src/App.vue`

## License

MIT