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

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

你可能感兴趣的:(模板vue3tsxvite)