如果你不知道Fantastic-admin是什么，让我给你看几个预览。它看起来像预览图，如果您有兴趣，可以单击此处了解更多信息并尝试一下。这是一个高度完成的、开箱即用的后台框架，它刚刚发布了Vue3版本支持。回到正题vue-element-admin作为一个知名度很高的后台框架，是很多刚接触后台开发的开发者的首选框架，但是由于它的作者似乎并没有太重视这项工作，而且有无Vue3版本相关趋势导致Github仓库中积累了近千个未关闭的问题。开发者在使用过程中遇到的很多问题，社区提供的解决方案都需要修改框架的源码，这也使得市面上出现了很多基于vue-element-admin的魔改版本。但大多只是小修小补。如果要修改框架本身的设计，会牵一发而动全身。这也是我早期使用vue-element-admin开发后的一些感受，所以决定自己写一个高度可配置的后端框架。以上虽然是我几年前的经历，但相信还是有很多开发者还在使用vue-element-admin，有的想寻找替代产品，只是觉得迁移工作太麻烦。毕竟迁移工作的前提是了解两个框架的区别，才能保证迁移工作的正常进行。那么本文将尽可能详细的介绍一下vue-element-admin和Fantastic-admin的区别，给还在犹豫要不要替换vue-element-admin的小伙伴一点参考。因为Fantastic-admin已经提供了Vue3版本，所以本文将以Vue3版本作为最终的迁移目标。当然Vue2版本也适用于大部分情况。准备工作首先需要准备一个Vue3版本的模板源码，并保证可以在本地启动运行。#最简单的方法是克隆一份源码到本地gitclone-btemplatehttps://gitee.com/hooray/fantastic-admin.git#然后进入项目cdfantastic-admin#安装依赖pnpminstall#Runpnpmrundev其次，建议大家完整阅读Fantastic-admin的文档，对它有个大概的了解，再看下面的区别。不同的环境配置得益于vue-element-admin的简单功能。环境配置中只能设置VUE_APP_BASE_API。在Fantastic-admin中，对应的参数是VITE_APP_API_BASEURL。当然，Fantastic-admin也提供了页面标题、调试工具、构建压缩等一系列配置。详情请阅读《配置 - 环境配置》。框架配置vue-element-admin只提供了6个配置项（titleshowSettingstagsViewfixedHeadersidebarLogoerrorLog），大部分是界面布局上的设置。建议这部分可以直接参考Fantastic-admin的框架配置文件。我们提供了更丰富的界面布局设置。主题遗憾的是，vue-element-admin没有提供主题配色的功能，但是Fantastic-admin可以自定义主题配色，详情请阅读《主题》。全局资源SVG图标vue-element-admin将svg文件存放在./src/icons/svg/目录下，这部分svg文件可以直接复制到Fantastic-的./src/assets/icon/目录下admin，并且我们也提供了组件，可以直接使用，详情请阅读《全局资源 - SVG图标》。图片vue-element-admin将图片存放在./src/assets/目录下，这部分图片资源可以直接复制到Fantastic-admin的./src/assets/images/目录下。Sprite图像这是Fantastic-admin单独提供的功能。如果项目中使用了很多小尺寸素材图片，可以考虑使用sprite图片将多张小图片组合成一张大图片，使用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-adminFantastic-admin表示hiddenmeta.sidebar是否在导航栏中显示alwaysShow/不提供该设置，因为Fantastic-admin中自动处理的meta.rolesmeta.authFantastic-admin兼容vue-element-的权限admin设计模式，并提供了更高级的权限模式meta.titlemeta.title导航标题meta.iconmeta.icon导航图标meta.noCachemeta.cachevue-element-admin的noCache和Fantastic-admin的cache都是页面缓存配置，但是背后的逻辑它和使用方式完全不同。meta.breadcrumbmeta.breadcrumb是否显示在面包屑导航中，或者meta.affix/tab页面是否固定。在Fantastic-admin中，可以通过右键单击标签页来手动修复标签页。而不是在路由配置中固定写meta.activeMenumeta.activeMenu来高亮指定的导航除了上面vue-element-admin提供的配置项外，Fantastic-admin还提供了很多额外的配置项，详情请阅读《路由 - 导航配置》.Fantastic-admin中的页面缓存，可以理解为只有二级路由缓存，因为我们提供了一个特性，不管路由中配置了多少层，最终都会被处理成二级，但是大家可以放心，只是路由被处理成了二级，导航和面包屑导航依然保持原有的层级结构展示。这样做的目的也是为了彻底解决多级路由缓存的问题。相信大家在vue-element-admin中一定遇到过这种问题。社区中也有各种各样的解决方案，从来没有一个统一的解决方案。所以Fantastic-admin提供了一个一劳永逸的解决方案，详情阅读《页面缓存》。最后，这份迁移文档只是简单说明一下整体情况。迁移工程毕竟是一个浩大的工程，过程中难免会出现各种不可预知的问题。建议加入讨论组自由讨论，寻求帮助。
