Vben Admin Documentation

The following list contains community-driven (non-official) projects that integrate with Vben across various backend technologies. These projects are open-sourced by Vben users. Please check the specific license for each repository before use.

Golang

• gf-vben: Backend | Frontend

PHP

• Joyboo-admin-easyswoole: Backend | Frontend
• laravel-vben: Backend | Frontend

Java

• lamp-cloud/lamp-boot: SpringCloud Backend | SpringBoot Backend | Frontend
• coffee-boot: Backend
• wemirr-platform: Backend | Frontend
• vboot-java: Backend | Frontend
• helio-cloud/helio-boot: SpringCloud Backend | SpringBoot Backend | Frontend
• yudao-cloud/ruoyi-vue-pro: SpringCloud Backend | SpringBoot Backend | Frontend

.NET

• osharp-vben-admin: Frontend (Integrates with Osharp)
• vboot-net: Backend | Frontend
• Admin.NET: Source Code

A single menu file is treated as a MenuModule. Each module contains an orderNo for sorting and a menu object containing the actual menu configuration.

Note on Paths: When defining children, the path field should not start with a /. The system automatically resolves child paths by appending them to the parent path.

Example of a module definition:

import type { MenuModule } from '/@/router/types';
import { t } from '/@/hooks/web/useI18n';

const menu: MenuModule = {
  orderNo: 10,
  menu: {
    name: t('routes.dashboard.dashboard'),
    path: '/dashboard',
    children: [
      {
        path: 'analysis',
        name: t('routes.dashboard.analysis'),
      },
      {
        path: 'workbench',
        name: t('routes.dashboard.workbench'),
      },
    ],
  },
};

export default menu;

This module is transformed into a flattened structure where child paths become dashboard/analysis and dashboard/workbench.

The project uses Less as the default preprocessor to maintain consistency with Ant Design. Common styles are centralized in the src/design/ directory.

Directory Structure

• ant/: Overrides for Ant Design styles.
• color.less: Color definitions.
• index.less: Entry point for styles.
• public.less: Public utility classes.
• theme.less: Theme-related styles.
• config.less: Globally injected configuration. This file is automatically available in all components, allowing you to use variables without manual imports.
• transition/: Animation-related styles.
• var/: Variable definitions.

To use variables in a component, simply use them within a <style lang="less"> block; config.less is already implicitly injected.

<style lang="less" scoped>
  // config.less is implicitly injected here
  .my-class {
    color: @primary-color; // Example variable usage
  }
</style>

When running yarn build, the project generates a _app.config.js file and inserts it into index.html. This file allows you to modify configuration (like API URLs) in the production environment without rebuilding the project.

How it works

1. Define variables starting with VITE_GLOB_ in your .env files.
2. After building, locate /dist/_app.config.js.
3. Modify the values inside the window.__PRODUCTION__VUE_VBEN_ADMIN__CONF__ object.
4. Refresh the browser to apply changes.

Accessing Glob Settings

To retrieve these dynamic variables in your code, use the useGlobSetting hook provided in src/hooks/setting/index.ts.

// Example of the generated _app.config.js structure
window.__PRODUCTION__VUE_VBEN_ADMIN__CONF__ = {
  VITE_GLOB_APP_TITLE: 'vben admin',
  VITE_GLOB_APP_SHORT_NAME: 'vue_vben_admin',
  VITE_GLOB_API_URL: '/app',
  VITE_GLOB_API_URL_PREFIX: '/',
  VITE_GLOB_UPLOAD_URL: '/upload',
};

The project follows a structured layout for organized development:

• build/: Build scripts, configurations, and Vite settings.
• mock/: Mock data definitions.
• public/: Static assets.
• src/: Main source code directory:
  • api/: API interface definitions.
  • assets/: Icons, images, and SVGs.
  • components/: Shared components.
  • design/: Style files.
  • directives/: Custom Vue directives.
  • enums/: Enums and constants.
  • hooks/: Composition API hooks (categorized into component, core, event, setting, and web).
  • layouts/: Layout files (default, iframe, page).
  • locales/: Internationalization (i18n) files.
  • logics/: Business logic.
  • router/: Route configurations.
  • settings/: Project settings (component, design, encryption, locale, project, and site settings).
  • store/: State management (Pinia/Vuex).
  • utils/: Utility functions.
  • views/: Page components.
• types/: TypeScript type definitions.
• vite.config.ts: Vite configuration file.

.
├── build
├── mock
├── public
├── src
│   ├── api
│   ├── assets
│   ├── components
│   ├── design
│   ├── directives
│   ├── enums
│   ├── hooks
│   ├── layouts
│   ├── locales
│   ├── logics
│   ├── router
│   ├── settings
│   ├── store
│   ├── utils
│   └── views
├── types
└── vite.config.ts

To optimize local development speed, the project does not use on-demand style importing during development. Instead, it performs a full import of ant-design-vue/dist/antd.less to reduce the number of HTTP requests (avoiding ~100 extra requests per page).

On-demand style importing via vite-plugin-style-import is only activated during the production build process.

// src/main.ts
if (import.meta.env.DEV) {
  import('ant-design-vue/dist/antd.less');
}

// build/vite/plugin/styleImport
import styleImport from 'vite-plugin-style-import';
export function configStyleImportPlugin(isBuild: boolean) {
  if (!isBuild) return [];
  const styleImportPlugin = styleImport({
    libs: [
      {
        libraryName: 'ant-design-vue',
        esModule: true,
        resolveStyle: (name) => {
          return `ant-design-vue/es/${name}/style/index`;
        },
      },
    ],
  });
  return styleImportPlugin;
}