关于vite:ViteVue3NaiveUIPinia搭建一套优雅的后台管理模板真香

42次阅读

共计 1251 个字符,预计需要花费 4 分钟才能阅读完成。

趁着春节放假,欠缺了一下春节前本人搭建的后盾治理模板的文档,在欠缺文档的同时又删改了局部不是 bug 的代码,讲真,有强迫症和代码洁癖的我搭建这套模板的进度属实是有点慢了,然而究竟还是实现了,只管这是第一个版本

首先申明,这个模板参考了多个风行的 Vue3 后盾治理模板,次要是 Vben Admin,毫无疑问这是一个十分优良且风行的后盾治理模板,然而对老手并不敌对,学习老本较高,甚至对一个中级前端来说要间接上手二次开发也是有肯定难度的

简介

Vue Naive Admin,一个基于 Vue3.0、Vite、Naive UI 的后盾治理模板,相较于其余比拟风行的后盾治理模板,此我的项目绝对简洁、轻量,没有集成 TypeScript,没有集成国际化,没有集成简单的主题配置,学习老本非常低,对老手极其敌对。不过麻雀虽小五脏俱全,权限、Mock、菜单、axios 封装、pinia、我的项目配置、款式配置、环境配置,以及一些常常用的根底组件封装等等这些该有的都有,通过参考多个 vue3 后盾治理模板后以最简洁优雅的形式实现,十分实用于中小型我的项目或者集体我的项目,当然,以此模板进行二次封装革新用于大型项目也未尝不可。

为什么要开发这个模板

  1. Vue3 和 Vite 曾经趋于成熟,学习 vite 和 vue3 十分有必要,通过开发模板进行学习是一个很好的形式,事实也证实我的确从中获益良多
  2. 目前支流的 Vue3+Vite 后盾治理模板都绝对简单,甚至感觉有点花里胡哨(没有贬斥的意思,大部分的架构设计都很优良,只是感觉集成了太多不实用的货色)
  3. 本人搭的模板开发起来才最棘手。自己很恶感拿他人的模板间接上手开发,如果非要拿他人的模板开发也会尽量先吃透再用,不吃透就没有代码的掌控感和安全感

性能

  • 🍒 集成 Naive UI,尤大举荐的 UI 组件库,很香,https://www.naiveui.com
  • 🍑 集成登陆、登记及权限验证(暂只反对角色页面权限,后续思考增加按钮权限)
  • 🍐 集成多环境配置,dev、测试、预公布和生产
  • 🍎 集成 eslint + prettier,代码束缚和格式化对立
  • 🍉 集成 Mock 接口服务,dev 环境和公布环境都反对,可动静配置是否启用 mock 服务,不启用时不会加载 mock 包,缩小打包体积
  • 🍇 集成 unocss,antfu 大神开源的原子化 css 解决方案,十分轻量,目前我是本人写 scss 款式搭配着 unocss 应用的,很香
  • 🍍 集成 pinia,Vuex 的代替计划,轻量、简略、易用,很香
  • 🍏 集成 axios,反对多 axios 实例,反对线上环境免从新打包批改 baseURL
  • 🍌 二次封装全局 Dialog、Message、LoadingBar 组件
  • 🍋 二次封装 localStorage 和 sessionStorage,反对设置过期工夫

源码

  • github: https://github.com/zclzone/vu…
  • gitee: https://gitee.com/zclzone/vue…

预览

https://template.qszone.com

文档

羽雀文档:Vue Naive Admin

正文完
 0