关于模板:如何上手使用-Ray-Template

Ray Template

🔗 技术栈

Ray Template 是一个基于 vue3.x vite4.x naive-ui pinia tsx 开发的中后盾模板。

🌸 解决了什么问题

其实市面上曾经有很多很优良的中后盾模板了，为什么还要思考反复去造轮子呢？其实市面上已有的优良模板，都会有一个共同点：轻便、冗余、难二开。不论是 vue-element-admin vben-admin，都有这个问题，对于老手而言或者是须要二次开发的程序员来说，上手难度不低。

作为前端开发，必定都有写过后盾管理系统。本人写的话，又很吃力；用他人的二开，有些时候又难以下手。包含我自己也是这样，也改过他人的模板，印象特地粗浅。

所以，决定本人用最新的技术栈去写一个可能让老手疾速上手、程序员可能疾速二次开发的中后盾模板。

📌 设计思路

• 全新的技术：都采纳全新的技术框架与构建工具
• 解耦式的设计：data method view 的拆散
• 保姆级正文：外围代码逐行正文，配套残缺的文档

🎨 疾速上手

分包

获取代码并且装置以来后，文件构造与支流的分包形式大同小异，所以这里不做赘述。并且每个包下基本上都有一 README.md 文件，自行浏览即可理解该包的根本应用。

如何取得一个洁净的页面

1. 找到 src/views/demo 文件夹后，删除
2. 找到 src/router/modules/demo 文件夹后，删除
3. 关上页面

通过上述步骤后，你就能失去一个洁净的模板了。就是这么简略，不须要去关注其余的无用页面剔除、无用组件的剔除。

开发

浏览 新增菜单 与 新增路由，依据文档走一遍，就能取得一个新的页面。

模板配置

模板反对一些零碎级别的配置属性，在 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。

谢谢大家的浏览，祝大家搬砖欢快。