XUI

基于 Vue 3 + TypeScript + Ant Design Vue 的现代化 UI 组件库

特性

• 🚀 基于 Vue 3 Composition API
• 🎨 基于 Ant Design Vue 设计体系
• 📦 完整的 TypeScript 支持
• 🎯 企业级组件质量
• 🌈 可定制的主题系统
• 📱 响应式设计

安装

# 使用 npm
npm install xui

# 使用 yarn
yarn add xui

# 使用 pnpm
pnpm add xui

快速开始

全局引入

import { createApp } from 'vue'
import XUI from 'xui'
import 'xui/style.css'

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

按需引入

import { XButton, XCard, XModal } from 'xui'

export default {
  components: {
    XButton,
    XCard,
    XModal
  }
}

组件

XButton 按钮

<template>
  <XButton type="primary" @click="handleClick">
    主要按钮
  </XButton>
  
  <XButton size="small">小按钮</XButton>
  <XButton size="large">大按钮</XButton>
  
  <XButton :loading="loading">
    {{ loading ? '加载中...' : '加载按钮' }}
  </XButton>
</template>

XCard 卡片

<template>
  <XCard title="卡片标题">
    <p>卡片内容</p>
  </XCard>

  <XCard title="小卡片" size="small">
    <p>紧凑布局</p>
  </XCard>

  <XCard title="可悬停卡片" hoverable>
    <p>悬停效果</p>
  </XCard>
</template>

XModal 模态框

<template>
  <XButton @click="showModal = true">
    打开模态框
  </XButton>

  <XModal
    v-model:visible="showModal"
    title="模态框标题"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <p>模态框内容</p>
    
    <template #footer>
      <XButton @click="showModal = false">取消</XButton>
      <XButton type="primary" @click="handleOk">确定</XButton>
    </template>
  </XModal>
</template>

主题定制

XUI 支持完整的主题定制：

import { createApp } from 'vue'
import XUI from 'xui'

const app = createApp(App)

app.use(XUI, {
  theme: {
    primaryColor: '#1890ff',
    successColor: '#52c41a',
    token: {
      borderRadius: 8,
      colorPrimary: '#1890ff',
    }
  }
})

app.mount('#app')

开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建组件库
npm run build:lib

# 类型检查
npm run type-check

# 运行测试
npm run test

项目结构

src/
├── components/          # 组件源码
│   ├── XButton.vue     # 按钮组件
│   ├── XCard.vue       # 卡片组件
│   ├── XModal.vue      # 模态框组件
│   └── index.ts        # 组件导出
├── demo/               # 演示页面
│   ├── App.vue         # 演示主组件
│   ├── main.ts         # 演示入口
│   └── style.css       # 演示样式
├── types/              # 类型定义
│   └── index.ts        # 类型导出
├── utils/              # 工具函数
│   └── index.ts        # 工具函数导出
├── theme/              # 主题配置
│   └── index.ts        # 主题配置导出
├── install.ts          # 安装函数
└── index.ts            # 主入口文件

浏览器支持

现代浏览器和 Internet Explorer 11+（需要相应的 polyfills）

| IE / Edge | Firefox | Chrome | Safari | Electron | | --------- | --------- | --------- | --------- | --------- | | IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions

贡献

欢迎提交 Issue 和 Pull Request！

许可证

MIT License