共计 3400 个字符，预计需要花费 9 分钟才能阅读完成。
如果你还不晓得 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 提供了一个一劳永逸的解决办法，具体可浏览《页面缓存》。
最初
本篇迁徙文档仅对整体做简略阐明，迁徙我的项目毕竟是个宏大工程，过程中难免会呈现各种无奈预测的问题，倡议能够加探讨群自在探讨寻求帮忙。
