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 提供了一个一劳永逸的解决办法,详细可阅读《页面缓存》。
最后本篇迁移文档仅对整体做简单说明,迁移项目毕竟是个庞大工程,过程中难免会出现各种无法预测的问题,建议可以加讨论群自由讨论寻求帮助。