🎨 XS-UI

基于 Element Plus 的企业级 Vue3 UI 组件库，并配套场景模板代码生成器（Template Studio & CLI）。

📚 文档入口

• 项目总览与架构：docs/guide/overview.md
• 团队演示说明文档：docs/guide/demo-playbook.md

✨ 特性

• 🔥 Vue 3 - 使用最新的 Vue 3 Composition API
• 💪 TypeScript - 完整的 TypeScript 支持
• 🎨 企业级 - 基于 Element Plus，经过生产环境验证
• 📦 开箱即用 - 一键安装，无需复杂配置
• 🛠 组件丰富 - 40+ 高质量组件
• 🎯 按需导入 - 支持 Tree Shaking

🚀 快速开始

安装

npm install xs-ui
# 或
yarn add xs-ui
# 或
pnpm add @xs-ui/xs-ui

完整引入

// main.ts
import { createApp } from 'vue'
import XsUI from 'xs-ui'
import 'xs-ui/dist/style.css'
import App from './App.vue'

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

按需引入

// 组件按需引入
import { XsButton, XsInput } from 'xs-ui'

// 在模板中使用
;<template>
  <xs-button type="primary">按钮</xs-button>
  <xs-input v-model="value" placeholder="请输入"></xs-input>
</template>

📖 组件使用

按钮组件

<template>
  <!-- 基础按钮 -->
  <xs-button>默认按钮</xs-button>
  <xs-button type="primary">主要按钮</xs-button>
  <xs-button type="success">成功按钮</xs-button>

  <!-- 不同尺寸 -->
  <xs-button size="large">大按钮</xs-button>
  <xs-button size="default">默认按钮</xs-button>
  <xs-button size="small">小按钮</xs-button>
</template>

输入框组件

<template>
  <xs-input v-model="value" placeholder="请输入内容" clearable />
</template>

<script setup>
import { ref } from 'vue'
const value = ref('')
</script>

表单组件

<template>
  <xs-form :model="form" label-width="100px">
    <xs-form-item label="用户名">
      <xs-input v-model="form.username" />
    </xs-form-item>
    <xs-form-item label="邮箱">
      <xs-input v-model="form.email" />
    </xs-form-item>
    <xs-form-item>
      <xs-button type="primary" @click="onSubmit">提交</xs-button>
    </xs-form-item>
  </xs-form>
</template>

🎯 可用组件

所有Element-plus组件和二封组件

🛠 开发

# 克隆项目
git clone <repository-url>
cd xs-ui

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建库文件
npm run build:lib

# 构建完整项目
npm run build

🤝 贡献

欢迎提交 Issue 和 Pull Request！

XS-UI - 让企业级开发更简单 🚀