一、开源项目简介

Vue Naive Admin

轻量、简洁、优雅！ Vue3 中后台管理模板

使用最新技术栈，开箱即用，极低的上手成本，让你专注于业务开发。开源免费可商用！

Vue Naive Admin 是一款极简风格的后台管理模板，包含前后端解决方案，前端使用 Vite + Vue3 + Pinia + Unocss，后端使用 Nestjs + TypeOrm + MySql，简单易用，赏心悦目，历经十几次重构和细节打磨，诚意满满！！

二、开源协议

使用MIT开源协议

三、界面展示

四、功能概述

设计理念

Vue Naive Admin 2022年2月开始开源，从 1.0 到现在的 2.0，一直秉持着简单即正义的理念，旨在帮助中小企业、在校大学生及个人开发者快速上手开发后台管理项目，为了降低使用者的学习成本，没有使用看似主流的 TypeScript（前端），这也使得 Vue Naive Admin 成为了市面上少有的 使用 JavaScript 的 Vue3 后台管理模板，而且还算优秀，得到了大量朋友的认可和喜爱。

特性

• 使用 Vue3 主流最新技术栈: Vite + Vue3 + Pinia
• 使用 原子CSS框架: Unocss，优雅、轻量、易用
• 集成 Pinia 状态管理，支持状态持久化
• 使用主流的 iconify + unocss 图标方案，支持自定义图标，支持动态渲染
• 使用 Naive UI，极致简洁的代码风格和清爽的页面设计，审美在线，主题轻松定制
• 先进且易于理解的文件结构设计，多个模块之间零耦合，单个业务模块删除不影响其他模块
• 扁平化路由设计，每一个组件都可以是一个页面，告别多级路由 KeepAlive 难实现问题
• 基于权限动态生成路由，无需额外定义路由，403和404页面可区分，而不是无权限也跳404
• 基于Redis集成 无感刷新，用户登录态可控，安全与体验缺一不可
• 基于 Naive UI 封装 message 全局工具方法，支持批量提醒，支持跨页面单例模式
• 基于 Naive UI 封装常用的业务组件，包含Page 组件、CRUD 表格组件及 Modal组件等，简单易用，减少大量重复性工作

五、技术选型

快速开始

环境准备

node：版本不小于 18.18，不建议使用 19 、21 等奇数版本

包管理工具：推荐 pnpm，如果还没有安装可执行以下指令安装

npm i -g pnpm

mysql：如果不熟悉后端，建议对齐本项目使用的 5.7 版本

redis：版本不低于 6

TIP

mysql 和 redis 可本地安装，也可以直接使用云服务器安装好的服务，自行选择

工具准备

git: 开发必备，无需多说

ide: 建议 vscode

插件: 如果你用的是 vscode，可使用项目代码里的推荐的插件列表快速安装

本地运行

后端

1、 安装依赖

npm i

2、创建数据库，数据库名 isme，也可自定义

3、在新创建的数据库下执行初始化sql脚本，项目根目录下的 init.sql 文件

4、将根目录下 .env 文件的数据库连接配置修改成自己的

5、启动

npm run start:dev

前端

1、安装依赖

pnpm i

2、启动

npm run dev