lileyzhao/showy-antdv-starter

Admin Dashboard UI Template Based on Vue + Vite + Antdv + UnoCSS
Create beautiful and simple admin dashboard UI projects quickly

Online Demo | Online Document

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 | 简体中文

Notice

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.

⚠️ Important Reminder: We are currently in a phase of brainstorming and code revisions. It is not advisable to use this for real-world projects.

Features

🌟 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)

Characteristics

⚡️ 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

Pre-configured

UI Framework

Antdv - An enterprise-class UI components based on Ant Design and Vue
UnoCSS - High-performance and extremely flexible instant atomic CSS engine

Plugins

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

Coding Style

Use the Composition API with <script setup> syntax
ESLint configured with the pre-configured rule set from @antfu/eslint-config

Development Tools

pnpm - Fast and disk space efficient package manager
Vite - Next-generation front-end toolchain
Vue TSC - TypeScript compiler for Vue
TypeScript - Superset of JavaScript

Try it now!

This project requires Node version >=14.18

GitHub Template

Create a repository using this template.

Clone to local

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

Checklist

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 :)

Usage

Development

To see it in action at http://localhost:4328, just run:

pnpm i
pnpm dev

Build

To build the application, run:

pnpm build

Then you will see the dist folder generated for publishing.

Preview

After building, you can preview the build locally by running:

pnpm preview

Deploy to Netlify

Go to Netlify and select your repository. Follow the instructions and your application will be created shortly.

Project Structure

.
├── 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

lileyzhao / showy-antdv-starter