別再費勁去找後臺的前端框架了，2021 年就用 Fantastic-admin 吧

前言

你知道光是基於 Vue 的後臺框架在 Github 上有多少個倉庫麼？

若是你搜索 vue admin 會獲得 13120 個倉庫，若是用 vue 後臺 會獲得 7596 個倉庫，若是把二者結合一下，搜索 vue admin 後臺 也仍是能獲得 2719 個（以上搜索統計截止至 2021/1/2）。

固然，若是你須要找一款後臺框架用來作項目或者是產品，大機率你不會上 Github 現搜，國內有不少文章整理過值得一用的後臺框架，例如 vue-element-admin 、d2-admin 、vue-antd-admin 等等，但只有這些了麼？

今天，就給你們正式介紹一款值得進入你收藏夾吃灰你在 2021 年關注的後臺框架：

Fantastic-admin —— 一款開箱即用的 Vue 中後臺管理系統框架

爲何要用它？

後臺框架這麼多，Fantastic-admin 爲何值得你去了解，它又有什麼亮點，下面就簡單介紹一下。

Tip：如下部分介紹爲專業版功能

繼承自 vue-automation

我在以前的《收下這款 Vue 項目模版，它將讓你的開發效率在 2021 年提升 50%》這篇文章裏介紹過 vue-automation 這款 Vue 項目模版，它集成了不少不錯的特性能夠方便在開發中直接使用，而必備浪費太多時間，而 Fantastic-admin 也繼承了大部分特性。

豐富的主題與佈局

雙側邊欄佈局	頭部導航佈局	單側邊欄佈局

自適應	自適應（有最小寬度）	定寬居中	定寬居中（有最大寬度）

除此以外，還提供了 5 款內置主題風格的界面能夠選擇

默認	Vue CLI 風格	碼雲風格	清新	素雅

固然，也提供的自定義配置主題的文件，可快速擴展一套自定義風格的主題。

路由導航

經過路由配置生成菜單導航是後臺框架的必備功能，除此以外，路由配置還支持外鏈、標記、權限等功能，而且還支持無限層級的頁面緩存。

關於頁面緩存的問題，以前我也特別寫過一篇文章叫《一勞永逸，解決基於 keep-alive 的後臺多級路由緩存問題》，感興趣的小夥伴能夠前往瞭解。

權限驗證

除了路由上的權限驗證外，還分別提供了鑑權組件、鑑權指令和鑑權函數，提供全方位鑑權。

鑑權組件

頁面中某個模塊，當前用戶具有該權限是如何顯示，不具有該權限又是如何顯示，針對這樣的需求，框架提供了 <Auth> 和 <AuthAll> 組件，具體使用以下：

<!-- 單權限驗證 -->
<Auth :value="'department.create'">
    你有該權限
    <template slot="no-auth">
        你沒有該權限
    </template>
</Auth>

<!-- 多權限驗證，用戶只要具有其中任何一個權限，則驗證經過 -->
<Auth :value="['department.create', 'department.edit']">
    你有該權限
    <template slot="no-auth">
        你沒有該權限
    </template>
</Auth>

<!-- 多權限驗證，用戶必須具有所有權限，才驗證經過 -->
<AuthAll :value="['department.create', 'department.edit']">
    你有該權限
    <template slot="no-auth">
        你沒有該權限
    </template>
</AuthAll>
複製代碼

鑑權指令

對於單個元素，也提供了 v-auth 和 v-auth-all 鑑權指令，使用上對比鑑權組件更方便，固然它能作的事情也更簡單。

<!-- 單權限驗證 -->
<button v-auth="'department.create'">新增部門</button>

<!-- 多權限驗證，用戶只要具有其中任何一個權限，則驗證經過 -->
<button v-auth="['department.create', 'department.edit']">新增部門</button>

<!-- 多權限驗證，用戶必須具有所有權限，才驗證經過 -->
<button v-auth-all="['department.create', 'department.edit']">新增部門</button>
複製代碼

鑑權函數

鑑權組件和鑑權指令控制的是頁面上的元素是否展現，而鑑權函數則更可能是使用在業務流程代碼裏的權限判斷。

// 單權限驗證，返回 true 或 false
this.$auth('department.create')

// 多權限驗證，用戶只要具有其中任何一個權限，則驗證經過，返回 true 或 false
this.$auth(['department.create', 'department.edit'])

// 多權限驗證，用戶必須具有所有權限，才驗證經過，返回 true 或 false
this.$authAll(['department.create', 'department.edit'])
複製代碼

多頁面（Tab 標籤欄）

雖然我我的以爲這個功能挺雞肋的，實際效果體驗也不如瀏覽器原生的 tab 標籤欄，但咱得有這功能。而且這功能目前在我看來，幾乎秒殺了其它同類框架，用一張圖簡單演示下吧：

國際化

國際化的支持固然也不能少，默認提供了簡體中文、繁體中文和英語三種語言包。

最後

除了以上介紹的外，還支持 mock 、CDN 、GZip 等特性，就不一一詳細介紹了，歡迎感興趣的小夥伴能夠來詳情瞭解並使用 Fantastic-admin