# naive-ui-admin

**Repository Path**: Ahjung/naive-ui-admin

## Basic Information

- **Project Name**: naive-ui-admin
- **Description**: Naive Ui Admin 是一款现代化的中后台解决方案，构建于强大的 Vue 3、高效的 Vite 2 以及类型安全的 TypeScript 之上。该框架不仅融合了前端领域的最新技术，还精心提炼了一系列典型的业务模型和页面模板，涵盖了从二次封装组件、动态生成菜单、细粒度权限校验到灵活的权限控制等关键功能
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: https://www.naiveadmin.com
- **GVP Project**: No

## Statistics

- **Stars**: 421
- **Forks**: 165
- **Created**: 2021-07-05
- **Last Updated**: 2025-10-13

## Categories & Tags

**Categories**: backend

**Tags**: None

## README

## 🚀 简介

`Naive Ui Admin` 是一款 完全免费 且可商用的中后台解决方案，基于 🌟 `Vue3.x` 🌟、🚀 `Vite` 🚀、✨ [Naive UI](https://www.naiveui.com/) ✨ 和 🎉 `TypeScript` 🎉。
它融合了最新的前端技术栈，提炼了典型的业务模型和页面，包括二次封装组件、动态菜单、权限校验等功能，助力快速搭建企业级中后台项目

## 🌈 特性
📦 二次封装的实用高扩展性组件
🎨 响应式、多主题、多配置，快速集成，开箱即用
🚀 强大的鉴权系统，支持 三种鉴权模式，满足多样业务需求
🌐 持续更新的实用性页面模板和交互设计，简化页面构建


## 🎥 预览
- [naive-ui-admin](https://gratis.naiveadmin.com)

账号：admin，密码：123456（随意）


## 🚀 Naive Admin - 开箱即用的企业级前后端框架 `商业版本`

> **✨ 多生态支持 · 多租户就绪 · 四年持续迭代**  
> 前端自由切换 Vue3 UI 库 | 后端支持 Java/PHP 单体与多租户架构  
> [详情→官网](https://www.naiveadmin.com) | [更新日志](https://www.yuque.com/u5825/zaqu0e)

---

## 🔥 为什么选择 NaiveAdmin 商业版？
- **省时间**：内置N个扩展组件与业务模板，不写一行样板代码即可开始业务开发
- **经实战**：已落地电网、跨境 ERP、SaaS 等 30+ 场景 
- **可扩展**：插件式菜单 / 按钮 / 数据权限，新增业务模块「0 侵入」

---

## 🖥️ 纯前端版本

| 版本 | 技术栈 | 配套后端 | 预览地址 |
|-----|-------|---------|-------------|
| **🆕 Naive UI Max** | Vu3 + Ts + NaiveUI |  否 | [https://max.naiveadmin.com](https://max.naiveadmin.com) |
| **Naive UI Plus** | Vu3 + Ts + NaiveUI |  支持Java/PHP | [https://plus.naiveadmin.com](https://plus.naiveadmin.com) |
| **Naive UI**   | Vue + Ts + NaiveUI  |  支持Java/PHP | [https://pro.naiveadmin.com](https://pro.naiveadmin.com) |
| **Arco Design** | Vu3 + Ts + Arco Design  |  支持Java     | [https://arco.naiveadmin.com](https://arco.naiveadmin.com)|
| **Element Plus** | Vu3 + Ts + Element Plus  |  支持Java     | [https://element.naiveadmin.com](https://element.naiveadmin.com) |
| **Antd Vue**   | Vu3 + Ts + Antd Vue  |  否          | [https://antd.naiveadmin.com](https://antd.naiveadmin.com)|

## 🔌 前后端版本

| 版本 | 技术栈     | 预览地址                                          |
|------|------------------|--------------------------------------------------------------|
| **Naive UI Plus** | Vu3 + Ts + NaiveUI  |  [https://plus-full.naiveadmin.com](https://plus-full.naiveadmin.com)    |
| **Arco Design** | Vu3 + Ts + Arco Design  |[https://arco-full.naiveadmin.com](https://arco-full.naiveadmin.com)    |
| **Element Plus** | Vu3 + Ts + Element Plus |  [https://element-full.naiveadmin.com](https://element-full.naiveadmin.com) |

## 🏢 多租户版本

| 版本           | 技术栈             | 适用场景           | 预览地址                                        |
|-----------------------------|-----------------------------|----------------|-------------------------------------------|
| **Vue3**  | Vu3 + Ts + NaiveUI + Java    | 构建企业级 Saas 化系统 | [https://tenant.naiveadmin.com](https://tenant.naiveadmin.com)   |
| **React** | React + Ts + Ant + Java  | 构建企业级 Saas 化系统       | [https://compose.warden.vip](https://compose.warden.vip)   |


## 📚 文档

[开源版本文档](https://docs.naiveadmin.com)

## 🛠 准备

- [node](http://nodejs.org/) 和 [git](https://git-scm.com/) -项目开发环境
- [Vite](https://vitejs.dev/) - 熟悉 vite 特性
- [Vue3](https://v3.vuejs.org/) - 熟悉 Vue 基础语法
- [TypeScript](https://www.typescriptlang.org/) - 熟悉`TypeScript`基本语法
- [Es6+](http://es6.ruanyifeng.com/) - 熟悉 es6 基本语法
- [Vue-Router-Next](https://next.router.vuejs.org/) - 熟悉 vue-router 基本使用
- [NaiveUi](https://www.naiveui.com/) - ui 基本使用
- [Mock.js](https://github.com/nuysoft/Mock) - mockjs 基本语法


## 🏗️ 使用

- 获取项目代码

```bash
git clone https://github.com/jekip/naive-ui-admin.git
```

- 安装依赖

```bash
cd naive-ui-admin

pnpm install

```

- 运行

```bash
pnpm run dev
```

- 打包

```bash
pnpm build
```

## 📜 更新日志

[CHANGELOG](./CHANGELOG.md)


## 🤝 如何贡献

非常欢迎你的加入！[提一个 Issue](https://github.com/jekip/naive-ui-admin/issues) 或者提交一个 `Pull Request`

**Pull Request:**

1. Fork 代码!
2. 创建自己的分支: `git checkout -b feat/xxxx`
3. 提交你的修改: `git commit -am 'feat(function): add xxxxx'`
4. 推送您的分支: `git push origin feat/xxxx`
5. 提交`pull request`

## 📋 Git 贡献提交规范

- 参考 [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) 规范 ([Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular))

  - `feat` 增加新功能
  - `fix` 修复问题/BUG
  - `style` 代码风格相关无影响运行结果的
  - `perf` 优化/性能提升
  - `refactor` 重构
  - `revert` 撤销修改
  - `test` 测试相关
  - `docs` 文档/注释
  - `chore` 依赖更新/脚手架配置修改等
  - `workflow` 工作流改进
  - `ci` 持续集成
  - `types` 类型定义文件更改
  - `wip` 开发中

## 🌐 浏览器支持

本地开发推荐使用`Chrome 80+` 浏览器

支持现代浏览器, 不支持 IE

| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
| :-: | :-: | :-: | :-: | :-: |
| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |

## 👥 维护者
[@Ah jung](https://github.com/jekip)

## 💬 交流

有关 `Naive Ui Admin` 的使用或其他问题，可以加入讨论群交流问题

QQ1群：328347666 （已满）
QQ2群：741353560

## 💖 赞助
#### 如果项目有帮到你，不妨请作者喝一杯咖啡吧！

![donate](https://assets.naiveadmin.com/assets/images/sponsor.png)
[Paypal Me](https://www.paypal.com/paypalme/majunping)