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。

謝謝大家的閲讀，祝大家搬磚愉快。