Advint UI

介绍

基于 Vue3 + TypeScript + Element Plus 的企业级组件库，提供了更高级的业务组件和丰富的功能扩展。

特性

• 🚀 基于 Vue3、TypeScript、Element Plus
• 📦 开箱即用的高质量组件
• 🎨 统一的设计规范和视觉风格
• 🔧 支持按需引入和Tree Shaking
• 📝 详细的文档和示例
• 🔥 支持 TypeScript，提供完整的类型定义
• ⚡️ 使用 Vite 构建，提供极致的开发体验

安装

安装组件库

pnpm add advint-ui

安装依赖

# 必需的依赖
pnpm add vue element-plus @element-plus/icons-vue @vueuse/core

# 如果需要使用 HTTP 请求功能
pnpm add axios

使用

完整引入

import { createApp } from 'vue'
import AdvintUi from 'advint-ui'
import 'advint-ui/styles/index.css'

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

按需引入基础组件

import { createApp } from 'vue'
import { AdvButton, AdvForm, AdvTable } from 'advint-ui'
import 'advint-ui/styles/index.css'

const app = createApp(App)
app.use(AdvButton)
   .use(AdvForm)
   .use(AdvTable)
app.mount('#app')

使用特殊组件

# HTTP 请求功能
import { createHttp } from 'advint-ui/special/http'

TypeScript 支持

// tsconfig.json
{
  "compilerOptions": {
    "types": ["advint-ui/global.d.ts"]
  }
}

组件分类

基础组件

• 无需额外安装依赖
• 包含常用的 UI 组件
• 已集成必要的工具库（lodash-es、sortablejs 等）

特殊组件

• 需要安装对应的依赖
• 按需引入，不影响基础组件的使用
• 独立打包，减小基础包体积

特殊组件及其依赖： | 组件 | 路径 | 依赖 | |------|------|------| | HTTP请求 | advint-ui/special/http | axios |

样式引入

所有组件样式已统一打包，只需要引入一次：

import 'advint-ui/styles/index.css'

浏览器支持

• Chrome >= 87
• Firefox >= 78
• Safari >= 14
• Edge >= 88

许可证

MIT