Naive Ui Admin

Naive Ui Admin 是一款基于 Vue3、Vite2 和 TypeScript 的先进中后台解决方案，集成了前沿的前端技术栈和典型业务模型。

它拥有二次封装组件、动态菜单、权限校验、粒子化权限控制等核心功能，旨在帮助企业快速构建高质量的中后台项目。

无论在新技术运用或业务实践层面，都能为您提供有力支持，并将持续更新，以满足您不断变化的需求

🚀 简介

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

🌈 特性

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

🎥 预览

naive-ui-admin

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

💡 提示

如果您需要更多功能和组件，不妨尝试全新的 NaiveAdmin，它可能正是您寻找的解决方案

NaiveAdmin 官网

NaiveAdmin 变更日志

为什么选我们？

为什么选择？

长期且稳定

naive-ui-admin 自 2021-07-04 发布开源版本，截止到现在，收获 4.4k ⭐⭐⭐ 千人交流群，至此我们，重新推出新版本 Naive Admin Pro 并且率先推出，多个版本供用户选择，持续更新频率，官网更新日志一看便知

简单易用

为了真正的实现，中后台开箱即用，我们一直在努力，比如推出，Full 版本，提供大量且常用，业务场景交互页面，即便不是专业前端，也能够轻松开发业务

多生态支持

我们们支持多个UI生态选择 Naïve UI、Ant Design Vue、 Arco Design Vue、 Element Plus Vue 主流 UI 框架，总有一款适合你们

框架风格

Naive Admin 遵从简约，清爽极简设计，非常注重，间距，色值，功能交互，细节把控，我们不想把系统做得太臃肿，花里胡哨的功能，一并往里面堆，实际用户需要的是一个，简单，且方便上手/二次开发的中后台系统，细微调整之后，就能快速做出一个符合自身项目系统

Pro 版本

纯前端解决方案，支持多个 UI 生态选择、可对接任意后端语言，只需开发好相应的 Api 即可

Plus 版本

纯前端解决方案，基于 NaiveUi 全新设计版本，新增众多特性，包括，功能，组件，页面，并且核心框架重构

Full 版本

前端 + 后端整套解决方案，支持 Java 和 Php

关于我们

我们的团队有，前端/后端/设计/客服专员，自有服务器和域名，已备案，同时为会员，提供专业社区作为售后技术支持，我们不同于其他产品，所有的东西几乎都是，免费的，官网/文档托管在gitee/github 访问稳定性先不说，随时可能下架，找不到人了，我们一致认为，商业化的同时也要为产品，提供相同价值才能让用户选择我们！

Plus

基于 NaiveUi 全新设计版本，增加了众多特性，值得一试

NaiveAdmin Plus 预览

Arco vue

智能设计体系，提供轻盈体验

NaiveAdmin Arco 预览

Element Plus

面向设计师和开发者的组件库

Element Plus Admin 预览

以上版本同时具备 NaiveAdmin 功能/组件/页面，一如既往、开箱即用，欢迎前往查看。

Antd vue

新产品，如果您选的技术栈是 Antd 的话，不妨看看

NaiveAdmin Antd 预览

📚 文档

文档地址

🛠 准备

node 和 git -项目开发环境
Vite - 熟悉 vite 特性
Vue3 - 熟悉 Vue 基础语法
TypeScript - 熟悉TypeScript基本语法
Es6+ - 熟悉 es6 基本语法
Vue-Router-Next - 熟悉 vue-router 基本使用
Naive-ui - ui 基本使用
Mock.js - mockjs 基本语法

🏗️ 使用

获取项目代码

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

安装依赖

cd naive-ui-admin

pnpm install

运行

pnpm run dev

打包

pnpm build

本地测试日志

D:\code\naive-ui-demo>git clone https://github.com/jekip/naive-ui-admin.git
Cloning into 'naive-ui-admin'...
remote: Enumerating objects: 3354, done.
remote: Counting objects: 100% (963/963), done.
remote: Compressing objects: 100% (295/295), done.
remote: Total 3354 (delta 737), reused 715 (delta 663), pack-reused 2391 eceiving objects: 100% (3354/3354), 396.00 KiB Receiving objects: 100% (3354/3354), 1.73 MiB | 1.94 MiB/s, done.

Resolving deltas: 100% (1824/1824), done.

D:\code\naive-ui-demo>cd naive-ui-admin

D:\code\naive-ui-demo\naive-ui-admin>pnpm install
Lockfile is up to date, resolution step is skipped
Packages: +956
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Downloading typescript@4.9.5: 11.62 MB/11.62 MB, done
Downloading echarts@5.5.0: 10.37 MB/10.37 MB, done
Progress: resolved 956, reused 411, downloaded 545, added 956, done
node_modules/.pnpm/core-js@3.36.1/node_modules/core-js: Running postinstall script, done in 169ms
node_modules/.pnpm/esbuild@0.15.18/node_modules/esbuild: Running postinstall script, done in 349ms
node_modules/.pnpm/esbuild@0.14.54/node_modules/esbuild: Running postinstall script, done in 384ms
node_modules/.pnpm/esbuild@0.18.20/node_modules/esbuild: Running postinstall script, done in 349ms
node_modules/.pnpm/vue-demi@0.13.11_vue@3.4.21/node_modules/vue-demi: Running postinstall script, done in 218ms
node_modules/.pnpm/vue-demi@0.14.7_vue@3.4.21/node_modules/vue-demi: Running postinstall script, done in 158ms

dependencies:
+ @vicons/antd 0.12.0
+ @vicons/ionicons5 0.12.0
+ @vueup/vue-quill 1.2.0
+ @vueuse/core 9.13.0
+ axios 1.6.8
+ blueimp-md5 2.19.0
+ date-fns 2.30.0
+ echarts 5.5.0
+ element-resize-detector 1.2.4
+ lodash-es 4.17.21
+ mitt 3.0.1
+ mockjs 1.1.0
+ naive-ui 2.38.1
+ pinia 2.1.7
+ qs 6.12.0
+ vfonts 0.0.3
+ vue 3.4.21
+ vue-router 4.3.0
+ vue-types 4.2.1

devDependencies:
+ @commitlint/cli 17.8.1
+ @commitlint/config-conventional 17.8.1
+ @types/lodash 4.17.0
+ @types/node 18.19.31
+ @typescript-eslint/eslint-plugin 5.62.0
+ @typescript-eslint/parser 5.62.0
+ @vitejs/plugin-vue 3.2.0
+ @vitejs/plugin-vue-jsx 2.1.1
+ @vue/compiler-sfc 3.4.21
+ @vue/eslint-config-typescript 11.0.3
+ autoprefixer 10.4.19
+ commitizen 4.3.0
+ core-js 3.36.1
+ cross-env 7.0.3
+ dotenv 16.4.5
+ eslint 8.57.0
+ eslint-config-prettier 8.10.0
+ eslint-define-config 1.12.0
+ eslint-plugin-jest 27.9.0
+ eslint-plugin-prettier 4.2.1
+ eslint-plugin-vue 9.24.1
+ esno 0.16.3
+ gh-pages 4.0.0
+ husky 8.0.3
+ jest 29.7.0
+ less 4.2.0
+ less-loader 11.1.4
+ lint-staged 13.3.0
+ postcss 8.4.38
+ prettier 2.8.8
+ pretty-quick 3.3.1
+ rimraf 3.0.2
+ stylelint 14.16.1
+ stylelint-config-prettier 9.0.5
+ stylelint-config-standard 29.0.0
+ stylelint-order 5.0.0
+ stylelint-scss 4.7.0
+ tailwindcss 3.4.3
+ typescript 4.9.5
+ unplugin-vue-components 0.22.12
+ vite 3.2.10
+ vite-plugin-compression 0.5.1
+ vite-plugin-html 3.2.2
+ vite-plugin-mock 2.9.8
+ vite-plugin-style-import 2.0.0
+ vue-demi 0.13.11
+ vue-draggable-next 2.2.1
+ vue-eslint-parser 9.4.2
+ vuedraggable 4.1.0

Done in 26.7s

D:\code\naive-ui-demo\naive-ui-admin>pnpm run dev

> naive-ui-admin@1.9.1 dev D:\code\naive-ui-demo\naive-ui-admin
> vite

                                                                                                              18:21:10
  VITE v3.2.10  ready in 1218 ms

  ➜  Local:   http://localhost:8001/                                                                          18:21:10
  ➜  Network: http://172.20.10.2:8001/                                                                        18:21:10
  ➜  Network: http://172.24.16.1:8001/

浏览器访问 localhost:8001，非常的完美。

🤝 如何贡献

非常欢迎你的加入！提一个 Issue 或者提交一个 Pull Request

Pull Request:

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

📋 Git 贡献提交规范

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

🌐 浏览器支持

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

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

</br>IE	</br>Edge	</br>Firefox	</br>Chrome	</br>Safari
not support	last 2 versions	last 2 versions	last 2 versions	last 2 versions

chat

详细介绍一下 Naive Ui Admin

Naive Ui Admin 是一个现代化的中后台前端解决方案，它基于 Vue 3.0、Vite、Naive UI 和 TypeScript 构建。

这个框架利用了前端领域的最新技术，旨在帮助开发者快速搭建企业级的中后台项目。以下是关于 Naive Ui Admin 的详细介绍：

技术栈

Vue 3.0：一个构建用户界面的渐进式框架，易于学习和集成。
Vite：一个现代化的前端构建工具，提供了快速的冷启动和即时模块热替换。
Naive UI：一个易于使用的 Vue 3 UI 库，提供了一套丰富的组件。
TypeScript：一种静态类型定义的语言，增强了JavaScript的代码质量。

特点

二次封装组件：项目中对一些组件进行了二次封装，以适应特定的业务需求。
动态菜单：支持动态生成菜单，根据用户的权限显示相应的菜单项。
权限校验：实现了细粒度的权限控制，确保用户只能访问授权的资源。
粒子化权限控制：提供了更为细致的权限管理方式。

项目结构

项目的目录结构清晰，便于维护和扩展，主要包含以下部分：

build：打包脚本相关。
mock：模拟数据文件夹。
public：存放公共静态资源。
src：源代码目录，包括 API 接口、组件、路由配置等。
types：类型定义文件。
vite.config.ts 和 windi.config.ts：配置文件。

环境要求

本地开发：推荐使用最新版的 Chrome 浏览器，不支持 Chrome 80 以下版本。
生产环境：支持现代浏览器，不包括 Internet Explorer。

社区和贡献

Naive Ui Admin 是一个开放源代码项目，欢迎社区的参与和贡献。项目组会根据贡献者的活跃度邀请他们加入团队。

学习资源

为了更好地理解和使用 Naive Ui Admin，建议开发者提前学习以下知识：

Vue 3 文档
Vue-RFCS
Vue2 迁移到 Vue 3
TypeScript
Vue-router
Naive UI
ES6
Vite
WindiCSS

浏览器支持

项目支持主流的现代浏览器的最新两个版本，但不包括 Internet Explorer。

获取代码

代码可以通过 Git 从 GitHub 或 Gitee 获取。项目还提供了详细的安装和启动指南。

构建与部署

项目提供了构建和部署的文档，帮助开发者了解如何将应用打包并准备上线。

权限管理

Naive Ui Admin 提供了前端角色权限实现和后台动态路由实现的文档，帮助开发者实现细粒度的权限控制。

文档和教程

Naive Ui Admin 提供了详尽的文档和教程，帮助开发者快速上手和解决开发中的问题。

加入社区

Naive Ui Admin 鼓励社区的参与，无论是提供建议还是提交代码，都是对项目的贡献。

这个项目不仅提供了一套强大的工具和组件，还建立了一个活跃的社区，以促进知识的共享和技术的进步。

参考资料

https://github.com/jekip/naive-ui-admin

Naive Ui Admin
chat
- 详细介绍一下 Naive Ui Admin
参考资料