likes
comments
collection
share

一个项目让你熟悉 Vue3 以及生态

作者站长头像
站长
· 阅读数 30

⚡ 简介

V3 Admin Vite 是一个免费开源的中后台管理系统基础解决方案,基于 Vue3、TypeScript、Element-Plus、Pinia 和 Vite 等主流技术

⭐ 关键字

  • 免费:是个优点吧?
  • 开源:应该也是个优点吧?
  • 管理系统:相信大多数人都会接触到这类系统
  • 基础:没有复杂的封装,没有复杂的类型体操,开箱即用
  • 主流技术:当然是使用新技术

❓ 学习它可能对你有的好处

  • 注释:各个配置项都写有尽可能详细的注释(对新人友好)
  • 依赖:定期更新所有三方依赖至最新版,确保版本不落后,并且同步更新最新的语法(想让你第一时间体验最新技术栈)
  • 稳定:基于该项目已经上线许多个真实的企业级项目(可以让你学完即可用)
  • 简洁:相对来说是 Vue3 社区里最简洁,但中后台必要功能却不缺失的模板项目(对新人友好)
  • 规整:代码风格统一,命名风格统一,注释风格统一(对代码洁癖人员友好?)

✨ 项目用到的那些技术?

都是都是都是最新的,放心吧,不会让你使用旧技术栈!

  • Vue 3.2.x:采用 TS + script setup,最新的 Vue3 组合式 API
  • Element Plus:对 Vue2 时代使用 Element UI 的朋友比较友好
  • Pinia: 我是 Vuex5
  • Vite 4.x:真的很快(别再说 Vite 不稳定了)
  • Vue Router 4.x:还是它,没得选
  • TypeScript:Vue3 时代请全面拥抱 TS(别再找借口说 TS 降低你的开发效率了)
  • PNPM:更快速,节省磁盘空间的包管理工具(你也不希望每次删除 node_modules 都很慢吧?)
  • Scss:相信大家都比较熟悉了吧?
  • CSS 变量:CSS 本身就有的功能,挺好用,主要控制项目的布局和颜色
  • ESlint:代码校验(已经配置好了,放心不会和 Prettier 冲突的)
  • Prettier:代码格式化(已经配置好了,放心不会和 ESlint 冲突的)
  • Axios:发送网络请求(已经封装好了)
  • UnoCSS:如果你体验原子化 CSS 引擎的话

❓ 能学习到哪些功能?

不止这些,但是列多了估计也你看着枯燥,就只列了一些常用的

  • 登录登出:项目调用真实接口,你能学会一套最常见的登录登录流程
  • 权限管理:页面权限(前端控制动态路由)、指令权限、权限函数、路由守卫
  • 多环境配置:开发环境(development)、预发布环境(staging)、正式环境(production)
  • 多主题配置:内置普通、黑暗、深蓝三种主题模式,也可以自己新增其他模式
  • SVG: vite-plugin-svg-icons 和 vite-svg-loader 两款依赖的使用
  • 动态侧边栏:根据路由表自动生成侧边栏
  • 动态面包屑:根据当前路由自动生成面包屑
  • Hook(Composables):有一些简单的 Hook Demo,帮助你快速了解 Hook 的用法和写法
  • ESlint + Prettier:两者一起规范代码,已经配置好在你保存代码时就自动修复你的代码了
  • 增删改查:已经给你写好了一份常见的基于表单和表格的增删改查供你参考

⛄ 再放点截图吧

太枯燥了,再放点截图看看吧

一个项目让你熟悉 Vue3 以及生态

一个项目让你熟悉 Vue3 以及生态

一个项目让你熟悉 Vue3 以及生态

一个项目让你熟悉 Vue3 以及生态

✏️ 文档当然是有的

有任何问题建议在 GitHub Issues 讨论,Gitee 仓库只是会定期同步过去

❤️ 感谢阅读到这里的朋友

感谢阅读到这里的朋友,毕竟是软文一篇。

如果你喜欢这个项目的话,欢迎去仓库支持一个 star !这是作者持续维护的唯一动力(小声:毕竟是免费的)

转载自:https://juejin.cn/post/7197681585977704508
评论
请登录