前言
你知道光是基於 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