antdv3-libs

一个基于 Ant Design Vue 4.x 的 Vue 3 组件库，包含常用组件、指令、过滤器和工具函数，提供完整的 Pinia 状态管理支持。

功能特性

• 丰富的 UI 组件（表格、表单、菜单等）
• 集成 Pinia 状态管理，包含权限管理 store
• 实用的指令（权限控制、拖拽等）
• 常用过滤器和工具函数
• 统一的样式主题

在项目中使用

1. 安装依赖

# 方式1：从 npm 安装
npm install antdv3-libs

# 方式2：从 yarn 安装
yarn add antdv3-libs

2. 全局注册（main.js）

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import { default as antdv3Libs } from 'antdv3-libs' // 导入组件库
import 'antdv3-libs/dist/style.css' // 导入样式文件

const app = createApp(App)
const pinia = createPinia()

// 方式1：使用自定义的 pinia 实例（推荐）
app.use(pinia)
app.use(antdv3Libs, { pinia }) // 传递 pinia 实例给组件库

// 方式2：使用组件库内置的 pinia 实例
// app.use(antdv3Libs)

app.mount('#app')

3. 单独导入组件（ES 模块）

import {
  axTable,
  axForm,
  axUploadModal,
  getPermissionsStore,
  pinia,
} from 'antdv3-libs'
import 'antdv3-libs/dist/style.css'
import { getCurrentInstance } from 'vue'

export default {
  components: {
    axTable,
    axForm,
    axUploadModal,
  },
  setup() {
    // 方式1：通过当前实例获取pinia
    const instance = getCurrentInstance()
    const permissionsStore = getPermissionsStore(
      instance.appContext.config.globalProperties.$pinia
    )

    // 方式2：如果已经通过app.use(antdv3Libs, { pinia })注册，可以直接使用传入的pinia
    // const permissionsStore = getPermissionsStore(pinia)

    // 使用组件和 store...
    return {
      // 返回组件和方法
    }
  },
}

项目版本

1.0.11 （2025-11-3）

• 优化 v-drag-modal 指令
• 优化 axUploadModal 组件
• 优化 axTable 组件

1.0.0 （2025-10-28）

• 初始化项目
• 添加基础组件和工具
• 集成 Pinia 状态管理
• 添加权限管理功能