1. Project Overview

Antdv Pro

General-Purpose Admin Dashboard System

Built with Vite 4 + Vue 3 + UnoCSS + Ant Design Vue 4 + TypeScript

AntdvPro is a comprehensive enterprise-level frontend and design solution for admin dashboards, built with Vue 3, Vite 4, ant-design-vue 4, Pinia, UnoCSS, and TypeScript. Inspired by the design patterns of Alibaba's React-based antd-pro, it uses the latest and most popular frontend technology stack. It comes with built-in features such as dynamic routing, multiple themes, and multiple layouts, helping you quickly build enterprise-level admin dashboard prototypes.

2. Open Source License

Licensed under MIT

3. Screenshots

4. Feature Overview

Efficient and Fast

Powered by Vite 4.x, everything is fast, including development, building, hot updates, hot loading, and hot module replacement.

Preconfigured Styles

Includes a built-in styling system based on UnoCSS. Atomic CSS makes your styles cleaner and more concise.

TypeScript

The entire project uses TypeScript, making your code more standardized and secure.

Nitro Mock Service

The project uses Nitro as its Mock service, providing non-intrusive Mock functionality that makes Mocking easier.

Internationalization

Provides internationalization support to meet the project's localization requirements.

State management

The project uses Pinia for state management, making it easier to use.

Features

• pnpm: Uses the latest pnpm as its package manager. It significantly reduces the size of node_modules, speeds up package installation, and supports dependency sharing to reduce disk usage.
• vite: Uses Vite as the frontend development tool. It significantly speeds up project startup and supports hot updates, greatly improving development efficiency.
• vue3: Uses vue3.3.x as its frontend framework. All core code uses the script-setup syntax, resulting in less code and lower maintenance costs.
• nitro mock: Uses Nitro for server-side mock data, decoupling it from the main project for greater flexibility and ease of use.
• ant-design-vue4: Uses ant-design-vue4 as the UI framework. The author of admin-pro is also a core member of ant-design-vue, providing long-term maintenance support.
• pinia: Uses Pinia as the state management tool, significantly improving code readability and maintainability while also supporting TypeScript.
• UnoCSS: An atomic CSS framework that eliminates the hassle of coming up with generic class names and improves development efficiency.
• Code Standards: We have packaged a set of ESLint-based code style configuration files that work out of the box and ensure consistency across different teams.
• Themes: Based on the design guidelines of the React version of antd-pro, we developed a Vue-based theme system and added several new features to meet as many different requirements as possible.
• Request Functions: We have encapsulated a set of fully typed request functions based on Axios, along with some basic interceptors. You only need to make the corresponding implementation adjustments according to your requirements to accommodate the different needs of various projects.
• Mobile Compatibility: We have made every effort to ensure mobile compatibility in the core framework. However, since our primary target is enterprise-level admin dashboard products, we have not implemented extensive mobile adaptations. If your project requires mobile support, you can refer to our code and make the necessary adjustments.

5. Tech Stack

AntdvPro is a comprehensive enterprise-level frontend and design solution for admin dashboards, built with Vue 3, Vite 4, ant-design-vue 4, Pinia, UnoCSS, and TypeScript. Inspired by the design patterns of Alibaba's React-based antd-pro, it uses the latest and most popular frontend technology stack. It comes with built-in features such as dynamic routing, multiple themes, and multiple layouts, helping you quickly build enterprise-level admin dashboard prototypes.

Usage

# Install degit
npm  i -g degit

# Clone the code
degit antdv-pro/antdv-pro [your project name]

# Switch to the project directory
cd [your project name]

# Install dependencies

pnpm install

# Start the project
pnpm dev