Vue Vben Admin

Vue Vben Admin is an upgraded open-source mid-to-back-office template built with modern web technologies. Key features include:

• Modern Tech Stack: Built using Vue 3, Vite, and TypeScript.
• Theming: Supports multiple color themes and custom theme configuration.
• Internationalization (i18n): Includes a complete built-in internationalization solution.
• Permissions: Features a robust built-in dynamic route permission generation system.
• Browser Support: Supports modern browsers (Edge, Firefox, Chrome, Safari). Note that it does not support Internet Explorer. Tailwind CSS v4.0 requirements: Safari 16.4+, Chrome 111+, and Firefox 128+.

@vben/backend-mock is a data mocking service for Vben Admin. It provides simulated data to support frontend development without requiring a real database connection.

Key characteristics:

• Simulated Environment: All data is mocked; it does not connect to any database.
• Real Backend Implementation: Unlike traditional mock.js tools, this uses a real backend service to overcome limitations like file uploads and complex logic simulation, allowing for a more realistic development environment.
• Automatic Integration: The service is integrated into the Vite plugin and starts automatically with the application; you do not need to start it manually.
• Production Note: Mock integration is not provided in production environments. For production, you should deploy your own service or connect to real data APIs.

Vben Admin provides a suite of framework components designed to simplify common UI tasks. These components are categorized into two main types:

1. Layout Components: Top-level container components used in the page content area to provide unified layout styles and basic structural functionality.
2. General Components: Frequently used UI elements such as Modals (弹窗), Drawers (抽屉), and Forms (表单).

Most general components are implemented using Tailwind CSS, making them compatible with various UI component libraries. The framework is designed to be non-restrictive; you are encouraged to use native components or build your own if the provided abstractions do not meet your specific requirements.

Vben Admin provides built-in support for multiple UI frameworks. While the default demo site uses Ant Design Vue, you can choose from several pre-configured versions depending on your preference:

• Ant Design Vue (Default)
• Element Plus
• Naive UI

Users can select the version that best fits their project requirements by using the corresponding package/app provided in the monorepo.

The locales directory is used to extend the internationalization capabilities of the application. This includes:

1. Extending third-party libraries: Configuring multi-language support for libraries like dayjs or component libraries like antd.
2. Application-specific translations: Managing the application's own i18n translation files.

Each application within the monorepo may implement different internationalization requirements.

Vue Vben Admin is built on a modern frontend stack designed for high efficiency and maintainability. When building on top of this framework, you are working with:

• Vue 3: The core reactive framework.
• Vite: The build tool and development server.
• TypeScript: For type-safe development.

The framework aims to minimize boilerplate and allow developers to focus on business logic rather than infrastructure configuration.

The Alert component provides a set of lightweight, pure JavaScript-callable dialogs. It is designed for quick interactions such as simple alerts, confirmations, and prompts.

When to use:

• Use Alert for temporary confirmations, simple notifications, and lightweight user input.
• Use Vben Modal for complex dialogs or heavy UI requirements.

Note on HMR: Dialogs created dynamically via alert, confirm, or prompt do not support Hot Module Replacement (HMR). If you modify the code related to an open dialog, you must close the dialog and reopen it to see the changes.