爆款預訂，2022 年最值得關注的后台框架 —— Fantastic-admin

前言

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

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

並且在這一年里，Fantastic-admin 也從 Vue2 版本正式升級到了 Vue3 版本，采用了官方推薦的構建工具 Vite ，增加並優化了許多新特性，讓應用場景更加廣泛，開發體驗更加絲滑。搭配不斷完善的文檔，不管是用於學習參考，還是實際應用，相信一定會有所收獲。

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

開箱即用

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

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

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

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

豐富的配置項

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

框架配置

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

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

環境配置

為方便不同生產環境下可能需要有不一樣的構建配置，框架也提供部分打包構建相關的配置，方便快速切換。

路由(導航)配置

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

 

進階功能

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

頁面緩存

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

其實路由扁平化的概念就是把多級路由轉換成二級，但保留路由原始的層級結構（用於導航欄展示）。這個方案我在去年的這篇《一勞永逸，解決基於 keep-alive 的后台多級路由緩存問題》文章里已經實踐並驗證成功。

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

現在在最新的 Vue3 版本中，頁面緩存得到了進一步的優化，通過簡單的路由配置就可以開啟頁面緩存，並且對比同類后台框架，會更加智能。例如可以根據某個頁面離開跳轉到不同的頁面進行區別處理，如 A 頁面跳轉到 B 頁面時，則 A 頁面進行緩存，A 頁面跳轉到 C 頁面時，則 A 頁面不緩存。

更多詳細介紹可點這里。

權限

提供 4 種鑒權方式，覆蓋開發中每一處鑒權場景：

• 路由權限
• 鑒權組件
• 鑒權指令
• 鑒權函數

更多詳細介紹可點這里。

國際化

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

更多詳細介紹可點這里。

錯誤日志上報

可全局攔截業務代碼的報錯，並提供上報方式，方便在生產環境定位線上問題。

更多詳細介紹可點這里。

億點點細節

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

整站動效

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

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

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

   

全局搜索

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

標簽頁最大化

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

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

標簽頁合並

所有支持多標簽后台框架，基本都是通過監聽路由變化來動態創建/切換標簽頁，本框架也不例外。

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

 

標簽欄拖拽排序

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

表單展示模式快速切換

這個小特性也是我比較滿意的創新之一

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

所以我實現了一個可以快速切換的標准 CURD 模塊的模版頁面，可以通過簡單的配置快速切換詳情表單的展示方式。

對這部分內容感興趣的可以點這里了解更多。

絲滑的開發體驗

在開發中你有沒有遇到過，使用某個組件，發現還沒引入；調用某個 API ，發現還沒 import ；每開發一個類似的新模塊，手動一個個去創建文件。如果有，並且覺得很麻煩，那就借着往下看吧，Fantastic-admin 都幫你考慮到。

加強版 <script setup>

在 <script setup> 里無需導入相關 API ，該依賴會自動導入（默認支持 vue 、vuex 和 vue-router）：

<script setup> // 原先需要手動 import 相關 API import { ref, computed } from 'vue' import { useStore } from 'vuex' import { useRoute, useRouter } from 'vue-router' const count = ref(0) const doubled = computed(() => count.value * 2) const store = useStore() store.dispatch('shopCar/getList') const route = useRoute() const router = useRouter() console.log(route.path) router.push('/dashboard') </script> 

<script setup> // 現在直接使用即可 const count = ref(0) const doubled = computed(() => count.value * 2) const store = useStore() store.dispatch('shopCar/getList') const route = useRoute() const router = useRouter() console.log(route.path) router.push('/dashboard') </script> 

除此之外，你還可以在 <script setup> 上直接設置組件名，如 <script setup name="ComponentName"> ，再也不需要用下面這種方式了：

<script> export default { name: 'ComponentName' } </script> <script setup> // 業務代碼 </script> 

更多詳細介紹可點這里。

全局組件自動按需加載

全局組件顧名思義就是在使用的時候，無需導入，無需注冊，本身就是一種很舒服的開發體驗。但在 Vue2 版本里，全局組件會在框架運行時就自動導入並注冊，導致首屏加載的文件會隨着全局組件的增多而越來越大。

而在 Vue3 版本里，對這一問題進行的優化，保留了使用時無需導入，無需注冊的開發體驗，從底層實現了按需自動導入並注冊。

更多詳細介紹可點這里。

超過 10 萬個 SVG 圖標免費使用

你可以在框架中輕松使用 Iconify 里 100 多套圖標合集，超過 10 萬個的 SVG 圖標，並且無需擔心項目構建體積，因為框架已經做好處理，構建過程也是按需構建，也就是說你使用到了哪些圖標，才會被打包進項目內。

更多詳細介紹可點這里。

通過命令行快速生成文件

開發過程中，避免不了手動去頻繁創建頁面、組件等文件，並且還要在文件里寫一些必要的代碼，如果你也覺得這件事很麻煩，而且一點也不酷，那么現在有更輕松的方式來處理這一切

就是通過命令行的形式自動生成文件，框架提供了 5 種模式，分別對應創建不同類型的文件。

• page 頁面文件
• component 組件文件
• store Vuex 全局狀態文件
• mock mock 文件
• module 頁面模塊文件

這里就演示一下創建一個頁面文件的整個流程是怎么樣的，更多詳細介紹可點這里。

從 vue-element-admin 遷移

vue-element-admin 做為國內使用人群最多，Github stars 數最高的一款后台框架，它的成功和作者的貢獻是不可否認的。

但缺點也很明顯，就是功能不夠豐富，同時沒有 Vue3 版本，並且作者在2020年6月份發布4.4.0版本后再無更新。

如果你現在正是 vue-element-admin 的使用者，看完這篇文章后對 Fantastic-admin 感興趣，我也提供了一篇《遷移攻略》，方便你可以快速將現有項目從 vue-element-admin 遷移到 Fantastic-admin 上。

結束語

做為 Fantastic-admin 的作者，我認為單靠興趣、用愛發電，是無法支持我長期堅持維護下去，所以你也應該發現了，Fantastic-admin 是一款免費與收費並存的產品。

其中基礎版保留了后台框架最常用的功能，並遵循 MIT 開源協議，可免費使用；而專業版則需要付費購買，並且專業版提供了更多高級的特性，能應對各種場景下的使用。

最后的最后，如果覺得 Fantastic-admin 這個框架不錯，或者已經在使用了，希望你可以去 Github 或者 Gitee(碼雲) 幫我點個 ⭐ ，這將對我是極大的鼓勵。