如果你還不知道 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 提供了一個一勞永逸的解決辦法，詳細可閱讀《頁面緩存》。
最后
本篇遷移文檔僅對整體做簡單說明，遷移項目畢竟是個龐大工程，過程中難免會出現各種無法預測的問題，建議可以加討論群自由討論尋求幫助。