zclzone / vue-naive-admin

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

简介

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

设计理念

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组件等，简单易用，减少大量重复性工作

极致的性能

2.0 和 1.0 区别

• 2.0 是基于 1.0 风格从 0 到 1 重新设计的，所以 2.0 看似跟 1.0 很像，但其实代码机构差别还挺大的。
• 1.0 只提供前端，后端使用 Mock 模拟的，而 2.0 是全栈版，提供真实的后端接口。
• 2.0 虽然版本高于 1.0，但复杂度却远低于 1.0，虽然 1.0 也很简单。
• 2.0 的灵活度远高于 1.0，只要你愿意，你可以为每个页面单独定制一个 layout

体验1.0 | template.isme.top

体验2.0 | admin.isme.top

Nestjs 后端

Vue Naive Admin 提供一套后端代码，技术栈使用 Nestjs + TypeOrm + MySql，内置 JWT、RABC及模板所需的一些基础接口。

• 源码-github: isme-nest-serve | github
• 源码-gitee: isme-nest-serve | gitee

文档

• 项目文档: docs | vue-naive-admin
• 接口文档: apidoc | isme-nest-serve

注：有个比较常见的问题，就是如何添加菜单和修改菜单，由于项目是由后端控制菜单资源的，所以需要对接后端后在资源管理功能对菜单进行增删改，然后在角色管理功能给对应角色进行授权。具体如何对接后端，请参考 项目文档。当然，可能有些菜单你不想通过权限控制，那么你可以在 /src/settings.js 文件添加 basePermissions，只需对齐菜单资源的结构即可，结构可以参照 接口文档。

使用这个模板开始你的项目

使用这个模板创建Github仓库.

或者使用 degit 克隆此仓库，这样将没有任何历史提交记录：

npx degit zclzone/vue-naive-admin

版权说明

本项目使用 MIT协议，默认授权给任何人，被授权人可免费地无限制的使用、复制、修改、合并、发布、发行、再许可、售卖本软件拷贝、并有权向被供应人授予同等的权利，但必须满足以下条件:

• 复制、修改和发行本项目代码需包含原作者的版权及许可信息，包括但不限于文件头注释、协议等

简单来说，作者只想保留版权，没有任何其他限制。

其他已对接本项目的后端项目

• isme-java-serve: 一个轻量级的Java后端服务，基于SpringBoot、MybatisPlus、SaToken、MapStruct等实现，已对接 Vue Naive Admin 2.0。
• naive-admin-go: 一个 Go 后端服务，基于 gin、gorm、mysql、jwt和session，已对接 Vue Naive Admin 2.0。

入群交流

添加微信，拉你进群

vue-naive-admin's Issues

创建路由的时候没有考虑配置VITE_PUBLIC_PATH的情况

路由创建的时候没有考虑VITE_PUBLIC_PATH不为/的情况，导致获取权限的时候报错。应当修改成以下的代码。PR就不提了

export const router = createRouter({
  history:
    import.meta.env.VITE_USE_HASH === 'true' ? createWebHashHistory('/') : createWebHistory(import.meta.env.VITE_PUBLIC_PATH),
  routes: basicRoutes,
  scrollBehavior: () => ({ left: 0, top: 0 }),
})

运行报vue.runtime.esm-bundler 找不到的？

关于naive ui表格的使用

你好，naive ui的表格需要依靠h函数才能完成单元格内的渲染，比如
https://github.com/zclzone/vue-naive-admin/blob/5aa4d3d5aedfc04d42171a05a651249c41899434/src/views/demo/table/index.vue#LL119C4-L127C7

请问有什么封装的方法可以做到直接在template标签里通过slot来写单元格内的组件吗？

Thanks Contributors，建议将导航守卫的白名单做成从Router.Js中提取Meta，同时 非登录页面应该从Meta获取而不是默认写死。

建议将导航守卫的白名单做成从Router.Js中提取Meta，同时 非登录页面应该从Meta获取而不是默认写死。
非登录查看页面可以考虑参考现在Router.Js分散位置存储方式，这样可以支持一些应用主页免登录访问，可以让后续的更新更加方便，否则就要对比admin框架的配置和内容才能更新到新版本了。

请教一下这里的写法和作用

vue-naive-admin/src/App.vue

Lines 7 to 14 in 402c7db

	<template #default="{ Component, route }">
	<app-provider>
	<keep-alive v-if="route.meta && route.meta.keepAlive">
	<component :is="Component" :key="route.fullPath" />
	</keep-alive>
	<component :is="Component" v-else :key="route.fullPath" />
	</app-provider>
	</template>

虽然看代码意思应该是根据路由上的元信息来判断这个页面是否被keep-alive，但是完全看不明白在<router-view></router-view>中写上<template></template>是什么意思，还用上了slot。
我自己尝试模仿着写，最后也没实现。

提了个奇怪的问题，希望可以得到解答。🙏

您的Logo和Last.fm的Logo是不是相差无几

开源不易，尊重作者的辛苦。
也许logo可以找朋友或者点点点小钱甚至自己用ps/procreate设计一下，也能突出个人的风格。

诚心建议，非找茬。

Adapted for nuxt3

First of all, amazing project, thank you for open source it.

I would like to know if you plan to adapt it so it can be used with nuxt3.

Thanks.

breakpoint issues

Breakpoints are not in the source code location during debugging.

点赞👏，帮助了我的毕设 Good Job！

做毕设后台管理，省了不少事！👏

更新版本后，unocss 属性未生效

富文本 h-400 没有生效。

Thanks Contributors，建议增加配置支持默认主题色。

建议通过env支持默认 白色或者黑色主题，以及是否允许换主题的配置项，感谢无私奉献。

希望作者二次封装常用组件，配置化。

Critical dependency: Accessing import.meta directly is unsupported (only property access is supported)

hello, first thank you for providing this amazing admin on naive
i tried to integrate this template in symfony using webpack encore

but when bundling the application this is what i get:

1 warn  in ./assets/admin/src/router/routes/index.js

Critical dependency: Accessing import.meta directly is unsupported (only property access is supported)

it pointed here:

// src/router/routes/index.js
const modules = import.meta.glob('@/views/**/route.js', { eager: true })

is there something that i need to enable in webpack to resolve this issue or is there another alternative to it ?
from my basic understanding this will load all the route.js inside the views folder
thanks..

弹窗保存时，表单校验未通过，没有提示，而是直接关闭

ResAddOrEdit.vue中的onSave函数校验未通过，直接return 会直接关闭，应该为return false。

标签无法左右切换

新开标签多的情况下，无法左右切换标签

Thanks Contributer，若后端token跟前端的token验证方式不同，如后台修改用户ID发生变化，导致Token鉴权更改会出无法使用问题。

如题，如果已经缓存在前端Locastorage，但是后端修改了用户ID，这个时候鉴权接口会报错403，但是403的接口会导致前端空白，除非删除前端token缓存，否则一直无法打开。

欢迎入群讨论

有任何什么疑问和建议，欢迎入群讨论，由于作者使用微信比较多，目前只有微信群，作者会在群里在线解答，群里也有不少活跃且热心成员~

src/views/login/index.vue中loginInfo.username绑定错误

src/views/login/index.vue 中，(v-model:value="loginInfo.username")绑定错误，是否应该绑定为loginInfo.name，否则后续loginInfo中取name值失败

请问项目本身没有配置热更新模式吗

代码修改后明明编译了，但是浏览器并没有实时更新

路由白名单

可以考虑出一个路由白名单吗？因为在业务中，有部分页面是无需认证即可访问

用户管理页面，handleOpen参数传递错误，导致打开modal点击确定没反应

2.0里面用户管理的分配角色，重置密码，使用handleopen时传错参数，导致点击确定没有反应。 直接传的onSave 改为onOk:onSave,

开发环境报vue找不到

[vite] error while updating dependencies:
Error: Build failed with 3 errors:
node_modules/vue-demi/lib/index.mjs:1:21: ERROR: [plugin: vite:dep-pre-bundle] Detected inconsistent metadata for the path "node_modules/vue/dist/vue.runtime.esm-bundler.js" when it was imported here:
node_modules/vue-demi/lib/index.mjs:27:14: ERROR: [plugin: vite:dep-pre-bundle] Detected inconsistent metadata for the path "node_modules/vue/dist/vue.runtime.esm-bundler.js" when it was imported here:
node_modules/vue-router/dist/vue-router.esm-bundler.js:6:187: ERROR: [plugin: vite:dep-pre-bundle] Detected inconsistent metadata for the path "node_modules/vue/dist/vue.runtime.esm-bundler.js" when it was imported here:

axios访问报405, 后端发现请求为"{"user":"user"}POST

使用axios时会出现post请求前加data的情况导致无法正确访问数据

你的支付宝的照片没有全

你的支付宝的照片没有全

关于接口400请求拦截器刷新后window.$message undefined问题

export function resReject(error) {
console.log(window, window.$message)
if (!error || !error.response) {
const code = error?.code
/** 根据code处理对应的操作，并返回处理后的message /
const message = resolveResError(code, error.message)
window.$message?.error(message)
return Promise.reject({ code, message, error })
}
const { data, status, config } = error.response
const code = data?.code ?? status
const message = resolveResError(code, data?.message ?? error.message)
/* 需要错误提醒 */
console.log(window, window.$message)
!config?.noNeedTip && window.$message?.error(message)
return Promise.reject({ code, message, error: error.response?.data || error.response })
}

问题
使接口404，第一次window.$message对象是存在的，但是页面刷新后，就变成undefined了，导致resReject中的window.$message失效

复现步骤；

1. 修改掉mock中的user接口（随便写几个数字在后面）使接口直接404
2. 走正常登录逻辑，第一次会有error弹窗，但是刷新页面之后，这个接口二次请求，弹窗就没有了

请问有主细表的表单模板吗

请问有主细表的表单模板吗

前端已进入无需引入直接用的时代了，建议改进

可以去看看antfu大佬提供的解决方案
组件自动引入：[unplugin-vue-components](https://github.com/antfu/unplugin-vue-components)
API自动引入：[unplugin-auto-import](https://github.com/antfu/unplugin-auto-import)
还有一个是路由页面自动引入，你自己找找看。
或者参考现成案例的https://github.com/dishait/tov-template

以上都是来源于Nuxt3的设计逻辑，antfu是Vue和Nuxt3的核心开发者，所以以上设计非要有意思

Good project

This project is too simple, too naive. Why don't you use typescript to develop projects

封装的axios请求，get请求无法接收到params参数

低版本浏览器访问报错：Uncaught SyntaxError: Unexpected token ?

低版本浏览器访问报错：Uncaught SyntaxError: Unexpected token ?

有个疑问哈，为什么部分文件还是js写法

请教下，我看vben里边基本都是ts写法，包括也谢utils,大佬项目里边还有部分文件使用的js写法，这是出于什么目的考虑的呢

安装失败问题&启动报错问题解决方案

1. 请检查node版本是否16+
2. 依赖是否安装成功，不成功可删除node_modules后重新安装，推荐使用pnpm

Xss漏洞

payload:Click

路由设置isHidden后还是无法隐藏

有没有详细的文档

新手小白想用这个，但是完全不知道后端需要返回什么，比如我想自定义返回格式，完全不知道改哪

build以后各种405搞不好啊

发一下nginx配置

deleted

RT.

表单中的输入框，输入下划线显示为空白

如果将 font-size 改大一点就能显示了

ts版本的倒是能显示

esbuild: Failed to install correctly

Hi,

不确定你本地的环境是什么，我使用默认安装，遇到如下错误，使用网上说的手动没有用.

node node_modules/esbuild/install.js

以下是错误信息:

vue-naive-admin/node_modules/vite-plugin-mock/node_modules/esbuild/bin/esbuild:2
throw new Error(`esbuild: Failed to install correctly
^

Error: esbuild: Failed to install correctly

Make sure you don't have "ignore-scripts" set to true. You can check this with
"npm config get ignore-scripts". If that returns true you can reset it back to
false using "npm config set ignore-scripts false" and then reinstall esbuild.

If you're using npm v7, make sure your package-lock.json file contains either
"lockfileVersion": 1 or the code "hasInstallScript": true. If it doesn't have
either of those, then it is likely the case that a known bug in npm v7 has
corrupted your package-lock.json file. Regenerating your package-lock.json file
should fix this issue.

at Object.<anonymous> (/.../vue-naive-admin/node_modules/vite-plugin-mock/node_modules/esbuild/bin/esbuild:2:7)
at Module._compile (node:internal/modules/cjs/loader:1103:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
at node:internal/main/run_main_module:17:47

8:36:14 PM [vite:mock] mock reload error Error: The service was stopped

关于src/router/guard/permission-guard.js文件中if (WHITE_LIST.includes(to.path)) return true判断问题

实际场景

1. 用户正常登录后获取到权限及动态路由并能完整展示
2. 页面停留在任意页面（不要首页）然后手动修改token，使其过期形成登录过期现象
3. 刷新页面
4. 经过resolveResError方法走useUserStore().logout()的时候会直接跳转到404

可选链

viteEnv?.VITE_APP_USE_MOCK && plugins.push(configMockPlugin(isBuild)); 报错
node版本问题 14及以上

请问在项目中如何配置jsx的eslint检查啊

安装失败问题&启动报错问题解决方案

1. 请检查node版本是否14+
2. 依赖是否是否成功，不成功可删除node_modules后重新安装，推荐使用pnpm

首次打开页面有Vue Router警告

[Vue Router warn]: No match found for location with path ...

调用app.use(router)时，异步路由包括根路径还未加入到router中

二次登录后标签页会多出登录标签

侧边栏链接展示顺序

我看到目前获取自定义路由使用Object.keys(modules).forEach，这样的话展示在侧边栏的顺序就比较随机了，后期是否可以加个配置让开发者设置路由链接的顺序，我目前是这样改了一下：

// src/router/routes/index.js

// 考虑到路由可能需要顺序
const sortmodulekeys = ['./modules/test.js', './modules/example.js']
const modules = import.meta.globEager('./modules/*.js')
const asyncRoutes = []
console.log(modules)
// Object.keys(modules).forEach((key) => {
//   asyncRoutes.push(...modules[key].default)
// })
sortmodulekeys.forEach((key) => {
  asyncRoutes.push(...modules[key].default)
})

在App.vue中为什么没定义 markRaw 和 defineAsyncComponent 也可以用

请教个问题：在App.vue中为什么没定义 markRaw 和 defineAsyncComponent 也可以用这两个方法、

照顾下新手

敢不敢多写点注释,方便学习.看代码头大了,无头绪

如何在数据表格中使用图标？

比如以下代码，如何给这个删除添加图标呢？

h(
  NButton,
  {
    size: 'small',
    type: 'error',
    ghost: true,
    style: 'margin-left: 15px;',
    onClick: () => handleDelete(row),
  },
  { default: () => '删除' }
),

在一个标签页tag上呼出右键菜单，在没有关掉的情况下，右键点击另一个，菜单会出现后马上消失