Admin Dashboard UI Template Based on Vue + Vite + Antdv + UnoCSS
Create beautiful and simple admin dashboard UI projects quickly
This is an open-source project based on the latest technology stack, aimed at providing a simple admin dashboard template. The project was initially created for educational purposes, featuring a clean design without complex encapsulations and advanced techniques, making it an excellent project for learning front-end technologies. The author is originally a backend developer who had to learn front-end development out of necessity, and hopes this project can be helpful to you.
English | 简体中文
This is merely a template project for an admin dashboard and does not implement full backend functionality. You can create a repository based on this template and implement your own admin dashboard.
- 🌟 Built with the latest and most popular front-end technologies
- 📐 Includes a comprehensive collection of common layout patterns
- 🔄 All layout patterns can be dynamically switched
- 🧩 Code structure is straightforward and easy to understand
- 📝 Fully documented with clear and comprehensive comments in both Chinese and English
- 🎨 Preserves the original characteristics of the component library (no theme overwriting, keeping the original style)
- ⚡️ Vue 3 - The latest version of Vue
- 🚀 Vite - Super fast development build tool
- 🎨 Antdv - An enterprise-class UI components based on Ant Design and Vue
- 💅 UnoCSS - High-performance and extremely flexible instant atomic CSS engine
- 🧹 ESLint - Pre-configured rule set based on @antfu/eslint-config
- Antdv - An enterprise-class UI components based on Ant Design and Vue
- UnoCSS - High-performance and extremely flexible instant atomic CSS engine
- Vue Router - Official router for Vue.js
- Pinia - Lightweight and flexible state management tool for Vue
- unplugin-vue-components - Automatically load components
- unplugin-auto-import - Automatically import Composition API, etc.
- VueUse - Collection of useful Composition API utilities
- Vue I18n - Internationalization support
- Use the Composition API with
<script setup>
syntax - ESLint configured with the pre-configured rule set from @antfu/eslint-config
- pnpm - Fast and disk space efficient package manager
- Vite - Next-generation front-end toolchain
- Vue TSC - TypeScript compiler for Vue
- TypeScript - Superset of JavaScript
This project requires Node version >=14.18
Create a repository using this template.
If you prefer a cleaner git history, you can do it manually:
npx degit lileyzhao/showy-antdv-template your-vue-admin-template
cd your-vue-admin-template
pnpm i # If you haven't installed pnpm, run: npm install -g pnpm
When using this template, try to update your own information correctly according to the checklist:
- Change the author name in
LICENSE
- Change the title in
index.html
- Change the project name and author in
package.json
- Change the favicon in the
public
directory - Clean up the README and CHANGELOG and remove irrelevant information
Then, enjoy :)
To see it in action at http://localhost:4328, just run:
pnpm i
pnpm dev
To build the application, run:
pnpm build
Then you will see the dist
folder generated for publishing.
After building, you can preview the build locally by running:
pnpm preview
Go to Netlify and select your repository. Follow the instructions and your application will be created shortly.
.
├── public/ # Public resources
├── src/ # Source code
│ ├── apis/ # Backend APIs
│ ├── assets/ # Static assets
│ ├── layouts/ # Layouts
│ ├── modules/ # Modules
│ ├── router/ # Router
│ ├── setting/ # Configuration files
│ ├── shared/ # Shared classes
│ ├── store/ # State management
│ ├── utils/ # Utility functions
│ ├── views/ # Views
│ ├── App.vue # Root component
│ └── main.ts # Entry file
├── index.html # Main HTML file
├── package.json # Project information
├── vite.config.ts # Vite configuration
├── uno.config # UnoCSS configuration
└── tsconfig.json # TypeScript configuration