Vue Naive Admin

screenshot of Vue Naive Admin
vite
vue

基于 Vue3 + Vite + Pinia + Unocss + Naive UI 的轻量级后台管理模板。

Overview

Vue Naive Admin is a minimalist backend management template that offers a comprehensive front-end and back-end solution. Utilizing a modern tech stack with Vite, Vue 3, Pinia, and Unocss on the front-end and NestJS, TypeORM, and MySQL on the back-end, this template is designed to be user-friendly and visually appealing. Since its open-source inception in February 2022, it has evolved from version 1.0 to 2.0, with a commitment to simplicity and user accessibility. The template aims to assist small and medium-sized enterprises, university students, and individual developers in quickly starting backend management projects.

Its straightforward setup reduces the learning curve, making it one of the few Vue 3 backend management templates that use JavaScript instead of TypeScript. This unique choice has contributed to its acclaim and popularity among users who appreciate ease of use combined with quality performance.

Features

  • Modern Tech Stack: Utilizes the latest technologies including Vite, Vue 3, and Pinia for a cutting-edge development experience.
  • Atomic CSS Framework: Powered by Unocss, this framework delivers elegant and lightweight design, streamlining styling processes.
  • State Management: Integrated Pinia for efficient state management with support for state persistence, enhancing user experience.
  • Customizable Icons: Supports the popular iconify and Unocss icon solutions, allowing for dynamic rendering and the addition of custom icons.
  • Naive UI Integration: Features a visually appealing design with Naive UI, promoting a clean code aesthetic and easy theme customization.
  • Advanced File Structure: Built with a modular approach where file structures are intuitive and allow independent module operation without interdependence.
  • Dynamic Route Generation: Automatically generates routes based on user permissions, enhancing security while distinguishing between 403 and 404 errors.
  • Redis Integration: Implements seamless refresh capabilities ensuring user login states are managed securely to balance performance and user experience.
vite
Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects

vue
Vue

Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.

dashboard
Dashboard

A dashboard style website template is a pre-designed layout that features a user interface resembling a control panel or dashboard. It typically includes charts, graphs, tables, and other data visualization tools that allow users to monitor and analyze data in real-time.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.