@me-framework/me-ui-antdv-next

me-ui-antdv-next

基于 Vue 3 + TypeScript + antdv-next 的企业级 UI 组件库

特性

• Vue 3 Composition API + <script setup>
• TypeScript 全量类型支持，附带组件级子路径类型
• 基于 antdv-next（Ant Design Vue 的 Vue 3 分支）二次封装，a- 前缀组件由消费项目全局注册
• Lucide 图标库 + 支持阿里 iconfont 动态加载
• 双构建形态：全量（ES + UMD + 单 style.css）与按需（组件级子路径 + Resolver）
• Vite 8 构建，支持按需导入自动 Tree-shaking

组件列表

组件完整 API 与示例见 document/components/ 目录，在线演示见 demo/。

环境要求

• Vue ≥ 3.0（peerDependency）
• antdv-next：组件内部使用 a- 前缀组件，消费项目需先全局注册
• TypeScript ≥ 4.7（支持 exports 子路径通配解析）

安装

npm install @me-framework/me-ui-antdv-next
# 或
yarn add @me-framework/me-ui-antdv-next
# 或
pnpm add @me-framework/me-ui-antdv-next

注意：antdv-next 为 peer 依赖，需在消费项目中一并安装。

快速开始

全局引入

import { createApp } from 'vue'
import Antd from 'antdv-next'
import 'antdv-next/dist/reset.css'
import MeUiAntdv from '@me-framework/me-ui-antdv-next'
import '@me-framework/me-ui-antdv-next/dist/style.css'

const app = createApp(App)
app.use(Antd)        // 先注册 antdv-next（组件内部依赖 a- 前缀组件）
app.use(MeUiAntdv)
app.mount('#app')

<template>
  <MeIcon name="Home" />
</template>

按需引入（推荐，减小打包体积）

组件库支持组件级子路径按需导入，每个组件可独立引入 JS 与样式。

import { createApp } from 'vue'
import Antd from 'antdv-next'
import 'antdv-next/dist/reset.css'
// 1) 先引入基础 token 基线（:root / html.dark 设计变量），按需引入任意组件都需引一次
import '@me-framework/me-ui-antdv-next/base.css'
// 2) 按需引入组件
import MeMenu from '@me-framework/me-ui-antdv-next/menu'
import '@me-framework/me-ui-antdv-next/menu/style.css'

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

使用 unplugin-vue-components 自动按需引入

在 Vite 项目中配置：

import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import { MeUiAntdvResolver } from '@me-framework/me-ui-antdv-next/resolver'

export default defineConfig({
  plugins: [
    Components({ resolvers: [MeUiAntdvResolver()] }),
  ],
})

注意

• 按需引入时需先引一次 base.css，否则 var(--me-*) 设计 token 缺失导致样式异常；全量引入（style.css）已含 base，无需再引。
• 组件内部依赖的兄弟组件（如 menu 依赖 icon）会随子入口自动引入，无需手动补引。
• 需要 TypeScript ≥ 4.7 以支持 exports 子路径通配解析。

函数式 API

MeMessage 支持函数式调用，可传入配置对象直接弹出消息对话框：

import { $message } from '@me-framework/me-ui-antdv-next'

// 打开（normal / process 双状态，请求期间自动切换 loading）
const instance = $message({
  data: {
    normal: { title: '提示', message: '确认执行该操作？' },
    process: { title: '处理中', message: '请稍候…', loading: true },
  },
  handler: {
    confirm: (data) => { /* 确认回调 */ },
    cancel: () => { /* 取消回调 */ },
  },
})
// 手动关闭
instance.close()
// 关闭所有
$message.closeAll()

MeIcon 提供 loadIconfont() 动态加载阿里 iconfont Symbol 资源：

import { loadIconfont } from '@me-framework/me-ui-antdv-next'

loadIconfont('//at.alicdn.com/t/c/font_xxx.js')

构建产物

包同时输出全量与按需两种形态，均通过 package.json 的 exports 字段暴露子路径：

dist/
├── me-ui-antdv-next.js          # 全量 ES
├── me-ui-antdv-next.umd.cjs     # 全量 UMD（<script> 直引）
├── style.css                    # 全量样式（已含 base token）
├── index.d.ts                   # 全量类型入口
├── base/index.css               # 按需：基础 token 基线
├── menu/                        # 按需：每组件一个子路径
│   ├── index.js
│   ├── index.css
│   └── index.d.ts
├── resolver/index.js            # unplugin Resolver
└── ...

本地开发

# 安装依赖
npm install

# 启动开发演示服务器
npm run dev

# 构建组件库（vue-tsc 类型检查 + 全量构建 + 按需构建 + 重组子路径 dts）
npm run build
# 或
npm run build:lib

# 构建演示站点
npm run build:demo

# 类型检查
npm run type-check

# 发布（patch/minor/major，或 beta 预发布）
npm run release
npm run release:beta
npm run quick-patch   # 快速 patch 版本发布

项目结构

├── src/                     # 组件库源码
│   ├── components/          # 组件目录，每个组件一个子目录（含 index.ts/index.vue/style.scss/types.ts）
│   ├── styles/              # 全局样式与设计变量（base.scss 为按需 token 基线入口）
│   ├── resolver/            # 按需 Resolver（componentDirMap 维护组件名→目录映射）
│   ├── utils/               # 工具函数
│   ├── composables/         # 组合式函数
│   ├── types/               # 全局类型定义
│   └── index.ts             # 组件库入口
├── demo/                    # 开发演示站点（views/layout/router/config）
├── document/                # Markdown 组件文档
├── scripts/                 # 构建后处理与发布脚本
├── vite.config.ts           # 全量构建配置（ES + UMD + style.css）
├── vite.ondemand.config.ts  # 按需构建配置（多入口 + 子路径 dts）
└── package.json             # 包入口与 exports 声明

参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request

License

MIT