Vue UI Kit 🎨

一个优雅的 Vue 3 UI 组件库，提供高质量的可复用组件。

✨ 特性

• 🚀 基于 Vue 3 Composition API
• 📦 按需导入，体积小巧
• 🎨 现代化设计，支持主题定制
• 🔧 TypeScript 支持，完整的类型提示
• 📱 响应式设计，移动端友好
• ✅ 完整的单元测试

📦 安装

# 使用 npm
npm install vue-ui-pp

# 使用 yarn
yarn add vue-ui-pp

# 使用 pnpm
pnpm add vue-ui-pp

🚀 快速开始

完整引入

// main.js
import { createApp } from 'vue'
import VueUIKit from 'vue-ui-pp'
import 'vue-ui-pp/dist/vue-ui-pp.css'
import App from './App.vue'

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

按需引入

<template>
  <VButton type="primary" @click="handleClick">
    点击我
  </VButton>
</template>

<script setup>
import { Button as VButton } from 'vue-ui-pp'

const handleClick = () => {
  console.log('按钮被点击了')
}
</script>

🎨 组件

Button 按钮

提供多种样式和状态的按钮组件。

<template>
  <VButton type="primary">主要按钮</VButton>
  <VButton type="danger">危险按钮</VButton>
  <VButton size="large">大号按钮</VButton>
  <VButton disabled>禁用按钮</VButton>
  <VButton :loading="true">加载中</VButton>
</template>

Modal 弹窗

支持标题、遮罩关闭、插槽自定义、确认与取消行为的弹窗组件。

<template>
  <VButton type="primary" @click="visible = true">打开弹窗</VButton>

  <VModal
    v-model:visible="visible"
    title="创建项目"
    :mask-closable="false"
    confirm-text="创建"
    cancel-text="取消"
  >
    <p>这里可以放任意自定义内容，例如表单或说明文本。</p>
  </VModal>
</template>

<script setup>
import { ref } from 'vue'
import { Button as VButton, Modal as VModal } from 'vue-ui-pp'

const visible = ref(false)
</script>

Message 全局提示

提供顶部堆叠的轻量提示组件，支持程序式调用、类型快捷方法、关闭回调。

<template>
  <VButton type="success" @click="() => message.success('保存成功')">成功提示</VButton>
  <VButton type="warning" @click="() => message.warning({ message: '请先填写表单', closable: true })">
    可关闭警告
  </VButton>
</template>

<script setup>
import { message } from 'vue-ui-pp'

// 也可以通过 app.config.globalProperties.$message 获取
</script>

📖 API 文档

详细文档请查看 GitHub Wiki

🔧 开发

# 克隆项目
git clone https://github.com/你的用户名/vue-ui-pp.git
cd vue-ui-pp

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 运行测试
npm test

# 构建
npm run build

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

MIT © 你的名字