前言

如果 2021 你還沒有聽說過 Fantastic-admin ，那即將到來的 2022 年可不要再錯過了。

Fantastic-admin 作為一款開箱即用的 Vue 中后臺管理系統(tǒng)框架，距離首次面向大眾已經(jīng)過去一年多的時間了，在這一年多的時間里，我們服務(wù)了數(shù)百個團隊和個人開發(fā)者，應(yīng)用在近千款的產(chǎn)品和項目中(保守估計)。其中小到有剛步入社會的新人，大到 Fantastic-admin 寫了一個練習(xí)項目并成功找到工作；大到地方性的國企/事業(yè)單位也有 Fantastic-admin 的身影。

并且在這一年里，F(xiàn)antastic-admin 也從 Vue2 版本正式升級到了 Vue3 版本，采用了官方推薦的構(gòu)建工具 Vite ，增加并優(yōu)化了許多新特性，讓應(yīng)用場景更加廣泛，開發(fā)體驗更加絲滑。搭配不斷完善的文檔，不管是用于學(xué)習(xí)參考，還是實際應(yīng)用，相信一定會有所收獲。

接下來我會從幾個方面介紹框架的特性，還不快快收藏一波~

開箱即用

什么是「開箱即用」？就是即便不看文檔，你也能根據(jù)文件夾布局、代碼注釋，快速上手開發(fā)業(yè)務(wù)功能。

作為框架的作者，我一直認(rèn)為，只要我盡可能的不偷懶，使用者就可以盡可能的“偷懶”。所以為了降低使用者入門成本，在開發(fā)初期就對比了大量同類后臺框架，小到文件夾布局、命名都有考量，盡可能符合使用者的直覺，或者說是開發(fā)人員的習(xí)慣，用人話說就是：讓你在開發(fā)過程中，想找某個模塊下的文件，覺得它應(yīng)該在什么目錄下，那它就在你想的那個目錄下。

當(dāng)然除了上手簡單，適合新手外，對高級開發(fā)者，在代碼里也有詳盡的注釋，搭配文檔上的介紹，讓你對某個功能點可以快速理解框架的設(shè)計邏輯與實現(xiàn)方式。

使用有文檔，代碼有注釋，還缺什么呢？對，就是視頻教程?？紤]到有很大一部分后端開發(fā)者也在使用 Fantastic-admin ，我非常能理解學(xué)習(xí)一門新技術(shù)時最初期時的那種迷茫，因為可能連入門文檔都未必能馬上看懂，開發(fā)環(huán)境都得搗鼓好久，所以我也準(zhǔn)備了幾期快速上手的視頻教程（目前視頻教程還只有 Vue2 版本的，Vue3 版本的視頻教程準(zhǔn)備在明年開始制作）。

豐富的配置項

如何在保證簡單易上手的前提下，還能讓功能豐富且完善？那配置化必然貫穿整個框架。

框架配置

例如布局、主題、標(biāo)簽欄、面包屑導(dǎo)航等幾乎所有的功能特性，你都可以在框架配置文件里進行配置，并且框架做了最大程度的優(yōu)化，讓配置項足夠簡單明了，例如大部分的配置都是 Boolean 類型的開關(guān)，如下圖（部分）：

與之相對的，在項目運行的時候，你還可以在瀏覽器里直接實時查看不同配置項的實際效果（部分）：

環(huán)境配置為方便不同生產(chǎn)環(huán)境下可能需要有不一樣的構(gòu)建配置，框架也提供部分打包構(gòu)建相關(guān)的配置，方便快速切換。

路由(導(dǎo)航)配置

大部分后臺框架都是采用路由配置生成側(cè)邊導(dǎo)航欄的模式，本框架也不例外，但最大的差別就是 Fantastic-admin 的配置參數(shù)足夠豐富。例如，除了可以設(shè)置導(dǎo)航圖標(biāo)外，還可以設(shè)置導(dǎo)航激活時的圖標(biāo)；包括更智能的頁面緩存配置（下面會詳細(xì)介紹）；以及可對每個路由頁面設(shè)置底部網(wǎng)站版權(quán)信息是否顯示等等。

進階功能

諸如頁面緩存、權(quán)限、國際化、錯誤日志上報、自定義字體、PWA應(yīng)用等等功能，只要你想使用，無需自行集成，框架全都有。

頁面緩存

三級(多級)路由緩存是后臺框架最常見，且也是很難解決的痛點，而 Fantastic-admin 提供了一種全新的概念，叫路由扁平化，并在框架內(nèi)提供了最佳實踐。

其實路由扁平化的概念就是把多級路由轉(zhuǎn)換成二級，但保留路由原始的層級結(jié)構(gòu)（用于導(dǎo)航欄展示）。這個方案我在去年的這篇《一勞永逸，解決基于 keep-alive 的后臺多級路由緩存問題》文章里已經(jīng)實踐并驗證成功。

路由扁平化處理后的效果+-------------------------+? ? ? ? ? ? ? ? +-------------------------+| Layout? ? ? ? ? ? ? ? ? || Layout.vue? ? ? ? ? ? ? ||? +-------------------+? ||? +-------------------+? ||? |Empty|? |+---------->|? |Page|? ||? |+-------------+|? ||? ||? ||? || Page? ? ? ? ||? ||? ||? ||? |+-------------+|? ||? ||? ||? +-------------------+? ||? +-------------------+? |+-------------------------+? ? ? ? ? ? ? ? +-------------------------+

現(xiàn)在在最新的 Vue3 版本中，頁面緩存得到了進一步的優(yōu)化，通過簡單的路由配置就可以開啟頁面緩存，并且對比同類后臺框架，會更加智能。例如可以根據(jù)某個頁面離開跳轉(zhuǎn)到不同的頁面進行區(qū)別處理，如 A 頁面跳轉(zhuǎn)到 B 頁面時，則 A 頁面進行緩存，A 頁面跳轉(zhuǎn)到 C 頁面時，則 A 頁面不緩存。

更多詳細(xì)介紹可點這里。

權(quán)限

提供 4 種鑒權(quán)方式，覆蓋開發(fā)中每一處鑒權(quán)場景：

路由權(quán)限

鑒權(quán)組件

鑒權(quán)指令

鑒權(quán)函數(shù)

更多詳細(xì)介紹可點這里。

國際化

與 element-plus 內(nèi)置的國際化進行深度整合，可實現(xiàn)切換語種時，框架自身語言 element-plus 提供的語言包同時切換。

更多詳細(xì)介紹可點這里。

錯誤日志上報

可全局?jǐn)r截業(yè)務(wù)代碼的報錯，并提供上報方式，方便在生產(chǎn)環(huán)境定位線上問題。

更多詳細(xì)介紹可點這里。

億點點細(xì)節(jié)

這些細(xì)節(jié)，單個拿出來或許不值一提，但也正是有了這些細(xì)節(jié)，才讓框架更出眾。

整站動效

前端通過簡單的動效，就可以大大提高交互的體驗，這也是為什么我不管在項目還是產(chǎn)品中，都熱衷于增加點小而美的動效。

而在框架中，如果你細(xì)心，就會發(fā)現(xiàn)每一處可能都有動效的加持，諸如載入、切換、顯隱等等。同時為了不讓特效喧賓奪主，我遵循 Material Design 官方動效指南，嚴(yán)格控制所有動效的執(zhí)行時長均在 150ms 到 300ms 之間。

以下展示部分動效，更多詳細(xì)介紹可以看我以前整理的一篇文章《我是如何設(shè)計后臺框架里那些錦上添花的動畫效果》。

全局搜索

全局搜索可以對側(cè)邊欄導(dǎo)航進行搜索，方便快速進入預(yù)期的模塊頁面。這個功能并不新鮮，而我在此基礎(chǔ)上增加了快捷鍵的支持，讓整個搜索的過程盡可能停留在鍵盤上，而不是需要反復(fù)在鍵盤和鼠標(biāo)之間來回切換。

標(biāo)簽頁最大化

很多后臺框架都有全屏功能，借助這瀏覽器級別的 API ，進入全屏后會覆蓋整個顯示器，和手動按鍵 F11 效果一樣。

但憑良心說，瀏覽器上的操作，除了看視頻和專注寫作這兩個場景下，基本不會用到全屏。而后臺框架的全屏功能的初衷是為了利用更多的區(qū)域，從而在頁面上顯示更多的內(nèi)容，所以我做了一個比全屏更好用的最大化功能。

標(biāo)簽頁最大化

很多后臺框架都有全屏功能，借助這瀏覽器級別的 API ，進入全屏后會覆蓋整個顯示器，和手動按鍵 F11 效果一樣。

但憑良心說，瀏覽器上的操作，除了看視頻和專注寫作這兩個場景下，基本不會用到全屏。而后臺框架的全屏功能的初衷是為了利用更多的區(qū)域，從而在頁面上顯示更多的內(nèi)容，所以我做了一個比全屏更好用的最大化功能。

標(biāo)簽頁合并

所有支持多標(biāo)簽后臺框架，基本都是通過監(jiān)聽路由變化來動態(tài)創(chuàng)建/切換標(biāo)簽頁，本框架也不例外。

但這就會出現(xiàn)頻繁操作導(dǎo)致標(biāo)簽頁數(shù)量會劇增，于是我思考標(biāo)簽頁是否可以像瀏覽器的標(biāo)簽頁一樣，只在一個標(biāo)簽頁里切換，于是一個新特性就出來了，你可以對比下面兩張圖標(biāo)簽欄上的差異。

標(biāo)簽欄拖拽排序

這也是一點小創(chuàng)新，幾乎所有支持多標(biāo)簽的后臺框架都沒有拖拽排序的功能，順著只能是依次向后累加。而我考慮到實際使用場景中，可能需要在多個標(biāo)簽頁來回切換操作，如果幾個標(biāo)簽頁相隔甚遠，反而降低了操作效率。

表單展示模式快速切換

這個小特性也是我比較滿意的創(chuàng)新之一

在實際開發(fā)中，我經(jīng)常會使用路由跳轉(zhuǎn)的方式去處理表單詳情頁，但是如果表單內(nèi)容量較少，產(chǎn)品經(jīng)理會希望把跳轉(zhuǎn)改成彈窗，或者抽屜的形式。這時候改一個頁面還好，如果有大量模塊需要調(diào)整，我整個人都會崩潰了。

所以我實現(xiàn)了一個可以快速切換的標(biāo)準(zhǔn) CURD 模塊的模版頁面，可以通過簡單的配置快速切換詳情表單的展示方式。

對這部分內(nèi)容感興趣的可以點這里了解更多。