Ray Template
🔗 技术栈
Ray Template
是一个基于 vue3.x
vite4.x
naive-ui
pinia
tsx
开发的中后盾模板。
🌸 解决了什么问题
其实市面上曾经有很多很优良的中后盾模板了,为什么还要思考反复去造轮子呢?其实市面上已有的优良模板,都会有一个共同点:轻便、冗余、难二开。不论是 vue-element-admin
vben-admin
,都有这个问题,对于老手而言或者是须要二次开发的程序员来说,上手难度不低。
作为前端开发,必定都有写过后盾管理系统。本人写的话,又很吃力;用他人的二开,有些时候又难以下手。包含我自己也是这样,也改过他人的模板,印象特地粗浅。
所以,决定本人用最新的技术栈去写一个可能让老手疾速上手、程序员可能疾速二次开发的中后盾模板。
📌 设计思路
- 全新的技术:都采纳全新的技术框架与构建工具
- 解耦式的设计:
data
method
view
的拆散 - 保姆级正文:外围代码逐行正文,配套残缺的文档
🎨 疾速上手
分包
获取代码并且装置以来后,文件构造与支流的分包形式大同小异,所以这里不做赘述。并且每个包下基本上都有一 README.md
文件,自行浏览即可理解该包的根本应用。
如何取得一个洁净的页面
- 找到
src/views/demo
文件夹后,删除 - 找到
src/router/modules/demo
文件夹后,删除 - 关上页面
通过上述步骤后,你就能失去一个洁净的模板了。就是这么简略,不须要去关注其余的无用页面剔除、无用组件的剔除。
开发
浏览 新增菜单
与 新增路由
,依据文档走一遍,就能取得一个新的页面。
模板配置
模板反对一些零碎级别的配置属性,在 src/app-config
文件夹下。也能够点击 浏览文档
查看如何配置。
🔧 二次开发
解耦数据与办法,是该模板的核心思想。所以你能够低成本的进行二次开发。
举个栗子
举例:AppMenu
,关上 src/layout/components/Menu.tsx
文件
数据:
import {useMenu} from '@/store'
const menuStore = useMenu()
const modelMenuOptions = computed(() => menuStore.options)
办法:
// 获取菜单选中回调
import {useMenu} from '@/store'
const menuStore = useMenu()
const {changeMenuModelValue} = menuStore
每当菜单选中后,都会触发该办法。并且
changeMenuModelValue
办法也是整个模板的外围函数,不论是url
menuKey
等批改,都会触发该办法渲染对应页面。
如果不称心以后菜单组件,能够自行替换后,配置上对应的办法,即可实现菜单组件的替换。模板采纳分块模式切割,也就是页面上的每个宰割区域都是一个对应组件,并且实现思路都是贯彻这个准则,如果须要替换或者更改,仅需依照例子思路二开即可。
最初
如果感觉 Ray Template
我的项目对你有所帮忙,能够给点一个小星星🌟🌟🌟~
有任何疑难或者需要,能够在下方评论或者提一个 issues
。
谢谢大家的浏览,祝大家搬砖欢快。