高度可复用的 Vue 3 组件库

这是一个基于 Vue 3、Vite、Pinia 和 TypeScript 构建的高度可复用代码库，集成了 Ant Design Vue UI 组件库，参考 Vben Admin 布局风格，旨在为多个业务系统提供共享的基础代码。

特性

• 基于 Vue 3 Composition API
• 使用 TypeScript 提供类型安全
• 集成 Pinia 状态管理
• 集成 Ant Design Vue UI 组件库
• 支持按需导入组件和工具函数
• 提供通用路由配置方案
• 包含可定制的主题和样式系统
• 支持多系统配置覆盖

安装

npm install @company/shared-library

使用方法

全量导入

import { createApp } from 'vue'
import SharedLibrary from '@your-username/shared-library'
import '@your-username/shared-library/dist/style.css'

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

按需导入

import { Button } from '@company/shared-library'
import '@company/shared-library/dist/style.css'

路由配置

import { registerRoutes, loadRouteModule } from '@company/shared-library/routes'

// 加载特定模块
const dashboardModule = await loadRouteModule('dashboard')
const routes = registerRoutes([dashboardModule])

开发

安装依赖

npm install

启动开发服务器

npm run dev

构建库

npm run build:lib

发布

使用以下命令发布新版本：

npm version patch # 或 minor, major
npm publish

目录结构

src/
├── components/     # 可复用 UI 组件
├── composables/    # 可复用组合式函数
├── layouts/        # 通用布局组件
├── pages/          # 通用页面组件
├── routes/         # 路由配置模块
├── styles/         # 全局样式和主题
├── utils/          # 工具类函数
├── constants/      # 常量定义
├── types/          # 类型定义
├── stores/         # 状态管理
├── plugins/        # 插件配置
├── directives/     # 自定义指令
├── guards/         # 路由守卫
├── services/       # 服务封装
├── config/         # 配置管理
└── index.ts        # 主入口文件