一个极致轻量的 Vue3 后台管理,终迎 2.0 版本,这次有点东西

简介

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

设计理念

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

这里就不讨论为什么使用 JavaScript 而不使用 TypeScript了,各自的优缺点大家都清楚,需要 TypeScript 版本的可以绕道,使用 TypeScript 的后台管理模板现在多如牛毛,请自行在 github 搜索

特性

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

极致的性能

Vue Naive Admin 2.0 极致轻量,性能也很优秀

6558568b2b476.png (954×820) (isme.top)

655853caa9ce8.png (1104×510) (isme.top)

提供对应的后端服务:Isme Nest Serve

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

后续可能会提供 Java 版和 Go 版的,但由于精力有限,欢迎感兴趣的大佬基于前端提供对接好的后端项目,当然,并不局限于 Java 和 Go,已对接的后端项目会展示到仓库的 README 和 官方文档中

为什么会有 2.0 版本?

因为2.0 是基于 1.0 风格从 0 到 1 重新设计的,虽然看着很像,但是代码结构差别很大,在 1.0 版本基础上迭代不合适。另外,2.0 版本是全栈版本,提供了对应后端服务,把后端服务搭建起来就可以直接上手开发,这跟 1.0 版本也是有着根本的不同。

可以这样说,2.0 版本既有 1.0 版本的沉淀, 也在 1.0 版本上做了根本性的突破

2.0 和 1.0 区别

  • 2.0 是基于 1.0 风格从 0 到 1 重新设计的,虽然看着很像,但是代码结构差别很大。
  • 1.0 只提供前端,后端使用 Mock 模拟的,而 2.0 是全栈版,提供真实的后端接口。
  • 2.0 虽然版本高于 1.0,但复杂度却远低于 1.0,虽然 1.0 也很简单。
  • 2.0 的灵活度远高于 1.0,得益于 扁平化路由 的设计,任何一个 .vue 文件都可以是一个页面,并且可以放到任意菜单下,甚至你还可以为每个页面单独定制一个 layout。

作者:大脸怪
链接:https://juejin.cn/post/7309921568493977637
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  • 18
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2.0后台管理系统是一个基于Vue.js 2.0开发后台管理系统。为了启动该系统,您首先需要安装Node.js,然后在终端中输入以下命令:npm install,然后输入npm run serve。在启动成功后,您可以使用admin账户和admin密码登录系统。 如果您想创建一个新的Vue项目,可以使用Vue脚手架工具。您可以使用npm包管理工具全局安装@vue/cli,命令为npm install -g @vue/cli。然后使用vue create命令创建一个新的项目,比如vue create vue-manage。您也可以使用yarn或cnpm来代替npm作为包管理工具进行安装。 在创建项目后,您可以根据需要安装其他依赖包,可以使用npm install命令来安装所需的包。您还可以使用淘宝镜像或yarn来加快包的安装速度。 总结来说,Vue2.0后台管理系统是一个基于Vue.js 2.0开发后台管理系统,您可以通过安装Node.js和运行相应的命令来启动该系统。同时,您可以使用Vue脚手架工具创建新的Vue项目,并根据需要安装其他依赖包。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue2后台管理系统](https://blog.csdn.net/fanlangke/article/details/126566029)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [vue2.0 从0到1搭建后台管理项目(一)](https://blog.csdn.net/weixin_64374806/article/details/130999871)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值