@ssic/vben

基于 Vben Admin 的 Vue 管理框架核心包。

特性

• 📦 单包发布 - 统一的 npm 包，简化依赖管理
• 🔌 可扩展 - 支持组件覆盖、布局插槽、主题定制
• 🔄 上游同步 - 可快速同步 vben5 最新代码
• 🎨 多 UI 框架 - 支持 Ant Design Vue、Element Plus、Naive UI

安装

pnpm add @ssic/vben

使用

基础使用

// main.ts
import { createApp } from 'vue';
import { extendManager } from '@ssic/vben';
import config from './admin.config';

const app = createApp(App);

// 初始化扩展系统
await extendManager.init(config);

app.mount('#app');

Vite 配置

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { adminVitePlugin } from '@ssic/vben/plugin';

export default defineConfig({
  plugins: [
    vue(),
    adminVitePlugin(),
  ],
});

扩展配置

// admin.config.ts
import { defineAdminConfig } from '@ssic/vben/plugin';

export default defineAdminConfig({
  app: {
    name: 'My Admin',
    logo: '/logo.png',
  },

  theme: {
    primaryColor: '#1890ff',
  },

  components: {
    overrides: {
      VbenButton: () => import('./components/MyButton.vue'),
    },
  },

  layout: {
    slots: {
      header: () => import('./layouts/Header.vue'),
    },
  },
});

开发

# 从 vben5 同步
pnpm sync

# 转换依赖
pnpm transform

# 构建
pnpm build

# 发布
pnpm pub

目录结构

vben-core/
├── packages/           # 源码 (与 vben5 一致)
├── src/
│   ├── extend/        # 扩展系统
│   ├── plugin/        # Vite 插件
│   └── index.ts       # 主入口
├── scripts/           # 构建脚本
└── dist/              # 构建产物

License

MIT