Student UI 组件库

Student UI - 基于 Vue 3 构建的现代化 UI 组件库。

特性

• 🚀 基于 Vue 3 Composition API
• 📦 支持按需引入
• 🎨 主题定制
• 💪 完整的 TypeScript 支持
• 📱 响应式设计

安装

npm install student-ui
# 或
yarn add student-ui
# 或
pnpm add student-ui

快速开始

全局引入

import { createApp } from 'vue'
import StudentUI from 'student-ui'
import 'student-ui/style.css'

const app = createApp(App)
app.use(StudentUI)

按需引入

import { XButton, XTable, XForm } from 'student-ui'
import 'student-ui/style.css'

// 在组件中使用
export default {
  components: {
    XButton,
    XTable,
    XForm
  }
}

组件列表

• 基础组件

  • X-Button - 按钮
  • X-Icon - 图标
  • X-Tag - 标签

• 表单组件

  • X-Form - 表单
  • X-FormItem - 表单项
  • X-Input - 输入框
  • X-Select - 选择器
  • X-Cascader - 级联选择器
  • X-Switch - 开关

• 数据展示

  • X-Table - 表格
  • X-TableColumn - 表格列
  • X-Card - 卡片
  • X-Steps - 步骤条

• 反馈组件

  • X-Dialog - 对话框
  • X-Message - 消息提示
  • X-Loading - 加载

全局 API

Message 消息提示

import { Message } from 'student-ui'

// 或在 Vue 应用中
app.config.globalProperties.$message.success('操作成功')

Loading 加载

// 使用指令
<div v-loading="isLoading">内容</div>

// 使用 API
import { Loading } from 'student-ui'
const loading = Loading.service({ text: '加载中...' })
loading.close()

主题定制

组件库使用 CSS 变量实现主题定制，可以通过覆盖 CSS 变量来自定义主题：

:root {
  --color-primary: #128cff;
  --color-success: #67c23a;
  --color-warning: #e6a23c;
  --color-danger: #f56c6c;
  --color-info: #909399;
}

TypeScript 支持

组件库提供完整的 TypeScript 类型定义：

import type { XButtonProps, XTableProps } from 'student-ui'

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建组件库
npm run build:lib

许可证

MIT