Lsy UI

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

特性

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

安装

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

使用

全局引入

// 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')

按需引入

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

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

组件列表

Button 按钮

<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 输入框

<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 卡片

<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>

开发

# 安装依赖
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