Admin Dashboard UI Template Based on Vue + Vite + NaiveUI + 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
- 🎨 NaiveUI - An interesting Vue 3 component library
- 💅 UnoCSS - High-performance and extremely flexible instant atomic CSS engine
- 🧹 ESLint - Pre-configured rule set based on @antfu/eslint-config
- NaiveUI - An interesting Vue 3 component library
- 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-naive-starter 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:4318, 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.
ROOT
├── .husky # Husky configuration files for Git hooks
├── .vscode # VSCode configuration folder
├── deploy # Deployment-related files
├── dist # Build output directory
├── locales # Internationalization resources
├── public # Public static assets
├── src # Source code directory
│ ├── api # API request-related code
│ ├── assets # Static assets (images, fonts, styles, etc.)
│ ├── layouts # Layout components
│ ├── modules # Modularized code
│ ├── router # Routing-related code
│ ├── shared # Shared code and resources
│ │ ├── _builtin_views_ # Built-in view components
│ │ ├── components # Common components
│ │ ├── constants # Constants definitions (including enums, etc.)
│ │ ├── directives # Custom directives
│ │ ├── hooks # Custom hooks
│ │ ├── plugins # Plugins
│ │ ├── settings # Configuration and settings
│ │ ├── typings # TypeScript type definitions
│ │ ├── utils # Utility functions
│ ├── store # State management
│ ├── views # View components
│ ├── App.vue # Root component
│ ├── main.ts # Entry file
│ ├── permission.ts # Permission control logic
├── .editorconfig # Code format configuration file
├── .env # Environment variable configuration file
├── dockerfile # Docker configuration file
├── index.html # Entry HTML file
├── package.json # Project configuration and dependency management
├── tsconfig.json # TypeScript configuration file
├── uno.config.ts # UnoCSS configuration file
├── vite.config.ts # Vite configuration file