简介

介绍

Walnut Admin 是一个基于 Vue3.0、Vite、 Naive UI、TypeScript、Nest.js 的前后端分离的全栈解决方案，目标是为开发中大型项目提供开箱即用的解决方案。项目的重点是前端，所以本文档的重点也是偏向前端。其中前端包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。

文档

• 中文文档地址为 wadlnut-admin-doc，采用 vitepress 开发。如发现文档有误，欢迎提 pr 帮助我们改进。
• 英文文档暂时写，vitepress还未进入稳定版本。

所需知识

本项目需要一定前端基础知识，请确保掌握 Vue 的基础知识，以便能处理一些常见的问题。 建议在开发前先学一下以下内容，提前了解和学习这些知识，会对项目理解非常有帮助:

提示

以下部分文档没有国内加速，需自行挂梯子访问。

前端知识：

• Vue3
• Vite
• TypeScript
• Vue-router
• Vue-i18n
• Naive UI
• Vueuse
• Unocss
• Iconify

后端知识：

• TypeScript
• Nest.js
• mongodb
• Redis

代码

• walnut-admin-client

项目前端地址，也是 walnut 的重心。

• walnut-admin-server

项目后端地址，数据库使用的是 mongodb。

vite 插件推荐

项目使用了数个antfu参与开发的各类 vite 插件，不用不知道，是真的很爽！

• unplugin-auto-import - 自动引入，再也不用 import 这儿 import 那儿啦！后续可能还会支持类型的自动引入（那就更爽了）。
• unplugin-vue-components - 组件的自动引入，同时支持类型优化，用过的都较好！
• unplugin-icons - 项目暂时还没引用，不过我也是用的 iconify 做的图标集，后续可能迁移。
• vite-plugin-windicss - 再也不用写 css/scss/sass 啦！功能十分强大！
• rollup-plugin-visualizer - rollup 的打包大小可视化插件，打完包哪里大一目了然！
• vite-plugin-compression - 打包压缩插件
• vite-plugin-html - html 插件，主要用于生成 title

浏览器支持

本地开发推荐使用Chrome 最新版浏览器，不支持Chrome 80以下版本。

生产环境支持现代浏览器，不支持 IE。

IE / Edge	Firefox	Chrome	Safari	iOS Safari	Samsung	Opera
Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions

如何加入我们

• discord 讨论

• Walnut Admin 还在持续更新中，本项目欢迎您的参与，共同维护，逐步完善，将项目做得更强。同时整个项目本着一切免费的原则，原则上不会收取任何费用及版权，可以放心使用。

• 如果你想加入我们，可以多提供一些好的建议或者提交 pr，我们会根据你的活跃度邀请你加入。