1. Project Overview

Naive Ui Admin is a completely free and commercially usable back-office management solution built with Vue3.0, Vite, ✨ Naive UI ✨, and TypeScript. It integrates the latest frontend technology stack and incorporates typical business models and pages, including enhanced reusable components, dynamic menus, permission verification, and other features to help you quickly build enterprise-level back-office projects.

2. Open Source License

Licensed under MIT

3. Screenshots

4. Feature Overview

 Features

Enhanced reusable components with high extensibility; responsive design, multiple themes, and configurable options for quick integration and out-of-the-box use; a powerful authentication and authorization system supporting three authentication modes to meet diverse business requirements; continuously updated practical page templates and interaction designs to simplify page development.

Latest Technology Stack

Developed using the latest technology stack, including Vue3, Vite, and TypeScript

Lightweight and fast hot reload

Extremely fast Hot Module Replacement (HMR) regardless of application size

Best Practices

Common page layouts, component usage examples, and plugin implementation examples

Component Encapsulation

Enhanced reusable components frequently used in daily development to meet basic development requirements

Theme Configuration

Rich theme configuration options and dark mode support

Permission Management

Comprehensive Frontend and Backend Permission Management Solution

5. Tech Stack

 Documentation

Documentation URL

 Preparation

• Node and Git - Project Development Environment
• Vite - Familiarize Yourself with Vite Features
• Vue3 - Familiarity with Vue basic syntax
• TypeScript - Learn the Basic Syntax of TypeScript
• ES6+ - Familiarity with basic ES6 syntax
• Vue-Router-Next - Familiarity with basic Vue Router usage
• NaiveUi - Basic UI Usage
• Mock.js - Familiarity with basic Mock.js syntax

Tool Configuration

If you use VS Code (recommended) as your IDE, you can install the following tools to improve development efficiency and code formatting:

• Iconify IntelliSense - Iconify icon extension
• windicss IntelliSense - windicss suggestion extension
• I18n-ally - i18n extension
• Vetur - Essential for Vue development (Volar is also an option)
• ESLint - Script code linting
• Prettier - Code formatting
• Stylelint - CSS formatting
• DotENV - .env file syntax highlighting 

Usage

• Get Project Code

git clone naive-ui-admin

• Install Dependencies

cd naive-ui-admin

pnpm install

• Run

pnpm run dev

• Packaging

pnpm build