advint-ui

基于 Vue3 + TypeScript + Element Plus 的企业级组件库,提供了更高级的业务组件和丰富的功能扩展。
1,001
Install
npm install advint-ui
Latest Version:0.0.16
Vue:3
Last Updated:Dec 26, 2024
Links: npm
Maintainer: advint

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

Version History

Version Released License
0.0.16
0.0.15
0.0.14
0.0.13
0.0.12