共计 1281 个字符，预计需要花费 4 分钟才能阅读完成。
Ray Template
🔗 技术栈
Ray Template 是一个基于 vue3.x vite4.x naive-ui pinia tsx 开发的中后盾模板。
🌸 解决了什么问题
其实市面上曾经有很多很优良的中后盾模板了，为什么还要思考反复去造轮子呢？其实市面上已有的优良模板，都会有一个共同点：轻便、冗余、难二开。不论是 vue-element-admin vben-admin，都有这个问题，对于老手而言或者是须要二次开发的程序员来说，上手难度不低。
作为前端开发，必定都有写过后盾管理系统。本人写的话，又很吃力；用他人的二开，有些时候又难以下手。包含我自己也是这样，也改过他人的模板，印象特地粗浅。
所以，决定本人用最新的技术栈去写一个可能让老手疾速上手、程序员可能疾速二次开发的中后盾模板。
📌 设计思路
- 全新的技术：都采纳全新的技术框架与构建工具
- 解耦式的设计：
datamethodview的拆散 - 保姆级正文：外围代码逐行正文，配套残缺的文档
🎨 疾速上手
分包
获取代码并且装置以来后，文件构造与支流的分包形式大同小异，所以这里不做赘述。并且每个包下基本上都有一 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办法也是整个模板的外围函数，不论是urlmenuKey等批改，都会触发该办法渲染对应页面。
如果不称心以后菜单组件，能够自行替换后，配置上对应的办法，即可实现菜单组件的替换。模板采纳分块模式切割，也就是页面上的每个宰割区域都是一个对应组件，并且实现思路都是贯彻这个准则，如果须要替换或者更改，仅需依照例子思路二开即可。
最初
如果感觉 Ray Template 我的项目对你有所帮忙，能够给点一个小星星🌟🌟🌟～
有任何疑难或者需要，能够在下方评论或者提一个 issues。
谢谢大家的浏览，祝大家搬砖欢快。