如果你還不知道 Fantastic-admin 是什麼，那麼我先用幾張預覽圖給大家瞭解一番。
 |
 |
 |
 |
 |
 |
看來預覽圖，如果你感興趣，可以點這裡來詳細瞭解並試用，這是一款完成度極高，開箱即用的後臺框架，並且剛剛釋出了 Vue3 版本支援。
迴歸正題
vue-element-admin 做為一款知名度相當高的後臺框架，是很多剛接觸後臺開發的開發人員首選框架，但由於其作者似乎並不太關注這款作品，並且也無任何 Vue3 版本的相關動向，導致在 Github 倉庫裡堆積了近千個未關閉的 issues 。
開發者在使用過程中遇到的很多問題，在其社群裡提供的解決方案都是需要修改框架原始碼，這也讓市面上出現了很多基於 vue-element-admin 的魔改版本。但大部分也只是小修小改，如果要修改到框架本身的設計，都是牽一髮而動全身的。這也是我早期使用 vue-element-admin 開發後的一些感觸，於是才下定決定自己寫一套可高度配置化的後臺框架。
雖然上面說的已經是我幾年前的經歷了，但相信現在依舊有很多開發者還在使用 vue-element-admin ，有的想找替代產品，但又嫌遷移工作太麻煩，畢竟遷移工作的前提是要了解兩套框架的差異，才可以確保遷移工作的正常進行。
那麼這篇文章，將會盡可能詳細的介紹 vue-element-admin 和 Fantastic-admin 在使用上的差異，給還在猶豫是否要替換 vue-element-admin 的小夥伴一點點參考。
因為 Fantastic-admin 已經提供了 Vue3版本 ，所以本篇文章會以 Vue3版本 為最終遷移目標。當然 Vue2版本 在大部分情況下也適用。
準備工作
首先你需要準備一份 Vue3版本 的模版原始碼，並確保能在本地正常啟動執行。
# 最簡單的方式，克隆一份原始碼到本地
git clone -b template https://gitee.com/hooray/fantastic-admin.git
# 然後進入專案
cd fantantic-admin
# 安裝依賴
pnpm install
# 執行
pnpm run dev
其次建議你先完整閱讀一遍 Fantastic-admin 的文件後，對其有個大致的瞭解後，再閱讀下面的差異。
差異
環境配置
得益於 vue-element-admin 的功能簡單，環境配置裡只能設定 VUE_APP_BASE_API ，在 Fantastic-admin 裡對應的是 VITE_APP_API_BASEURL 這個引數。
當然在 Fantastic-admin 還提供了頁面標題、除錯工具、構建壓縮等一系列的配置，詳細可閱讀《配置 - 環境配置》。
框架配置
vue-element-admin 一共只提供了 6 個配置項（title showSettings tagsView fixedHeader sidebarLogo errorLog），並且大部分都是介面佈局上的設定，建議這部分可直接參考 Fantastic-admin 的框架配置檔案，我們提供了更豐富的介面佈局設定。
主題
很遺憾，vue-element-admin 沒有提供主題配色的功能，而 Fantastic-admin 裡可以自定義主題配色方案，詳細可閱讀《主題》。
全域性資源
SVG 圖示
vue-element-admin 將 svg 檔案存放在 ./src/icons/svg/ 目錄下，這部分的 svg 檔案可直接拷貝到 Fantastic-admin 的 ./src/assets/icon/ 目錄下，並且我們還提供了 <svg-icon /> 元件方便直接使用，詳細可閱讀《全域性資源 - SVG圖示》。
圖片
vue-element-admin 將圖片存放在 ./src/assets/ 目錄下，這部分的圖片資源可直接拷貝到 Fantastic-admin 的 ./src/assets/images/ 目錄下即可。
精靈圖
這是 Fantastic-admin 單獨提供的特性，如果在專案中使用了較多尺寸不大的素材圖，你可以考慮使用精靈圖的方式將多張小圖合併成一張大圖，通過 css 背景圖定位的方式去展示使用，詳細可閱讀《全域性資源 - 精靈圖》。
樣式
vue-element-admin 將樣式存放在 ./src/styles/ 目錄下，這個目錄存放的基本是和框架相關的樣式，遷移過程中基本是無需關注的，你只需要關注你新增的樣式檔案，將這些檔案拷貝到 Fantastic-admin 的 ./src/assets/styles/ 目錄下，並在相關使用到的地方引入即可。
另外 Fantastic-admin 還提供了一個 ./src/assets/styles/resources/ 目錄用來單獨存放 SCSS 資源，這個目錄下的檔案會被框架自動引入，可在頁面上直接使用，詳細可閱讀《全域性資源 - 樣式》。
元件
vue-element-admin 將元件存放在 ./src/components/ 目錄下，並且使用時需要單獨註冊，而 Fantastic-admin 提供的全域性元件會在使用的時候自動註冊，效果與 vue-element-admin 一致，但使用體驗卻更棒。你只需將全域性元件同樣放到 Fantastic-admin 的 ./src/components/ 目錄下即可在頁面中直接使用，詳細可閱讀《全域性資源 - 元件》。
與服務端互動
vue-element-admin 的 ./src/utils/request.js 對應了 Fantastic-admin 的 ./src/api/index.js 檔案，它們都對 axios 進行了封裝，便於統一處理 POST 和 GET 請求，你可以根據原有的配置逐行遷移程式碼。
另外在 vue-element-admin 的 ./src/api/ 目錄下存放了以模組為維度拆分的獨立檔案，方便統一管理不同模組的所有介面請求，這在大型專案中是很有必要的，而 Fantastic-admin 並未提供特定目錄，如果你有這個需求，可以自行建立一個資料夾用來管理這部分檔案。
路由
Fantastic-admin 借鑑了 vue-element-admin 通過路由生成導航欄的思路，都是在路由裡增加導航配置引數，只不過 Fantastic-admin 將額外的導航配置引數統一都放在的 meta 物件中。下面這個對比表格能幫助裡快速瞭解 vue-element-admin 和 Fantastic-admin 對應的配置項。
| vue-element-admin | Fantastic-admin | 說明 |
|---|---|---|
| hidden | meta.sidebar | 是否在導航欄裡顯示 |
| alwaysShow | / | 並未提供該設定，因為在 Fantastic-admin 裡自動處理的 |
| meta.roles | meta.auth | Fantastic-admin 可相容 vue-element-admin 的許可權設計模式，並提供了更高階的許可權模式 |
| meta.title | meta.title | 導航標題 |
| meta.icon | meta.icon | 導航圖示 |
| meta.noCache | meta.cache | vue-element-admin 的 noCache 與 Fantastic-admin 的 cache 都是對頁面快取的配置，但背後的邏輯和使用方式卻完全不一樣 |
| meta.breadcrumb | meta.breadcrumb | 是否在麵包屑導航裡顯示 |
| meta.affix | / | 標籤頁是否固定，在 Fantastic-admin 中，標籤頁是可以通過右鍵標籤頁手動設定固定，而非在路由配置裡固定寫死 |
| meta.activeMenu | meta.activeMenu | 高亮指定導航 |
除了以上 vue-element-admin 提供的配置項之外，Fantastic-admin 還提供了很多額外的配置項，詳細可閱讀《路由 - 導航配置》。
頁面快取
在 Fantastic-admin 裡你可以理解只有二級路由快取，因為我們提供了一個特性，不管路由配置多少層級，最終都會被處理成二級，但是可以放心，僅僅是路由被處理成二級，而導航和麵包屑導航依舊是保持原有的層級結構展示。
這麼做的目的也是為了徹底解決多級路由快取的問題，相信你一定在 vue-element-admin 裡遇到過這類問題，社群裡的解決方案也五花八門，始終沒有一個統一的解決方案。
所以 Fantastic-admin 提供了一個一勞永逸的解決辦法，詳細可閱讀《頁面快取》。
最後
本篇遷移文件僅對整體做簡單說明，遷移專案畢竟是個龐大工程，過程中難免會出現各種無法預測的問題，建議可以加討論群自由討論尋求幫助。