如何上手使用 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。

谢谢大家的阅读，祝大家搬砖愉快。