前言

如果 2021 年你还没有据说过 Fantastic-admin，那行将到来的 2022 年可不要再错过了。

Fantastic-admin 做为一款 开箱即用 的 Vue 中后盾管理系统框架，间隔首次面向公众曾经过来一年多的工夫了，在这一年多的工夫里，咱们服务了 数百个 团队和集体开发者，利用在 近千款 的产品和我的项目中(激进预计)。其中小到有刚步入社会的新人，用 Fantastic-admin 写了一个练习我的项目并胜利找到工作；大到地方性的国企 / 事业单位也有 Fantastic-admin 的身影。

并且在这一年里，Fantastic-admin 也 从 Vue2 版本正式降级到了 Vue3 版本，采纳了官网举荐的构建工具 Vite，减少并优化了许多新个性，让利用场景更加宽泛，开发体验更加丝滑。搭配不断完善的文档，不论是用于学习参考，还是理论利用，置信肯定会有所播种。

接下来我会从几个方面介绍框架的个性，还不快快珍藏一波~

<img src=”C:\Users\hoora\Desktop\TVd4qU.gif” style=”zoom:50%;” />

开箱即用

什么是「开箱即用」？就是即使不看文档，你也能依据文件夹布局、代码正文，疾速上手开发业务性能。

做为框架的作者，我始终认为，只有我尽可能的不偷懒，使用者就能够尽可能的“偷懒”。所以为了升高使用者入门老本，在开发初期就比照了大量同类后盾框架，小到文件夹布局、命名都有考量，尽可能合乎使用者的直觉，或者说是开发人员的习惯，用人话说就是：让你在开发过程中，想找某个模块下的文件，感觉它应该在什么目录下，那它就在你想的那个目录下。

当然除了上手简略，适宜老手外，对高级开发者，在代码里也有详尽的正文，搭配文档上的介绍，让你对某个性能点能够疾速了解框架的设计逻辑与实现形式。

应用有文档，代码有正文，还缺什么呢？对，就是视频教程。思考到有很大一部分后端开发者也在应用 Fantastic-admin，我十分能了解学习一门新技术时最初期时的那种迷茫，因为可能连入门文档都未必能马上看懂，开发环境都得捣鼓良久，所以我也筹备了几期疾速上手的视频教程（目前视频教程还只有 Vue2 版本的，Vue3 版本的视频教程筹备在明年开始制作）。

丰盛的配置项

如何在保障简略易上手的前提下，还能让功能丰富且欠缺？那配置化必然贯通整个框架。

框架配置

例如 布局 、 主题 、 标签栏 、 面包屑导航 等简直所有的性能个性，你都能够在框架配置文件里进行配置，并且框架做了最大水平的优化，让配置项足够简单明了，例如大部分的配置都是 Boolean 类型的开关，如下图（局部）：

与之绝对的，在我的项目运行的时候，你还能够在浏览器里间接实时查看不同配置项的实际效果（局部）：

环境配置

为不便不同生产环境下可能须要有不一样的构建配置，框架也提供局部打包构建相干的配置，不便疾速切换。

路由 (导航) 配置

大部分后盾框架都是采纳 路由配置生成侧边导航栏 的模式，本框架也不例外，但最大的差异就是 Fantastic-admin 的配置参数足够丰盛。例如，除了能够设置导航图标外，还能够设置导航激活时的图标；包含更智能的页面缓存配置（上面会具体介绍）；以及可对每个路由页面设置底部网站版权信息是否显示等等。

进阶性能

诸如 页面缓存 、 权限 、 国际化 、 谬误日志上报 、 自定义字体 、PWA 利用 等等性能，只有你想应用，无需自行集成，框架全都有。

页面缓存

三级 (多级) 路由缓存是后盾框架最常见，且也是很难解决的痛点，而 Fantastic-admin 提供了一种全新的概念，叫 路由扁平化，并在框架内提供了最佳实际。

其实路由扁平化的概念就是把多级路由转换成二级，但保留路由原始的层级构造（用于导航栏展现）。这个计划我在去年的这篇《一劳永逸，解决基于 keep-alive 的后盾多级路由缓存问题》文章里曾经实际并验证胜利。

路由扁平化解决后的成果
+-------------------------+                +-------------------------+
| Layout                  |                | Layout.vue              |
|  +-------------------+  |                |  +-------------------+  |
|  | Empty             |  |  +---------->  |  | Page              |  |
|  |  +-------------+  |  |                |  |                   |  |
|  |  | Page        |  |  |                |  |                   |  |
|  |  +-------------+  |  |                |  |                   |  |
|  +-------------------+  |                |  +-------------------+  |
+-------------------------+                +-------------------------+

当初在最新的 Vue3 版本中，页面缓存失去了进一步的优化，通过简略的路由配置就能够开启页面缓存，并且比照同类后盾框架，会更加智能。例如能够依据某个页面来到跳转到不同的页面进行区别解决，如 A 页面跳转到 B 页面时，则 A 页面进行缓存，A 页面跳转到 C 页面时，则 A 页面不缓存。

更多具体介绍可点这里。

权限

提供 4 种鉴权形式，笼罩开发中每一处鉴权场景：

• 路由权限
• 鉴权组件
• 鉴权指令
• 鉴权函数

更多具体介绍可点这里。

国际化

与 element-plus 内置的国际化进行深度整合，可实现切换语种时，框架本身与 element-plus 提供的语言包同时切换。

更多具体介绍可点这里。

谬误日志上报

可全局拦挡业务代码的报错，并提供上报形式，不便在生产环境定位线上问题。

更多具体介绍可点这里。

亿点点细节

这些细节，单个拿进去或者不值一提，但也正是有了这些细节，才让框架更出众。

整站动效

前端 通过简略的动效，就能够大大提高交互的体验，这也是为什么我不论在我的项目还是产品中，都热衷于减少点小而美的动效。

而在框架中，如果你仔细，就会发现每一处可能都有动效的加持，诸如载入、切换、显隐等等。同时为了不让特效喧宾夺主，我遵循 Material Design 官网动效指南，严格控制所有动效的执行时长均在 150ms 到 300ms 之间。

以下展现局部动效，更多具体介绍能够看我以前整顿的一篇文章《我是如何设计后盾框架里那些精益求精的动画成果》。

全局搜寻

全局搜寻能够对侧边栏导航进行搜寻，不便疾速进入预期的模块页面。这个性能并不陈腐，而我在此基础上减少了快捷键的反对，让整个搜寻的过程尽可能停留在键盘上，而不是须要重复在键盘和鼠标之间来回切换。

标签页最大化

很多后盾框架都有全屏性能，借助这浏览器级别的 API，进入全屏后会笼罩整个显示器，和手动按 F11 成果一样。

但评良心说，浏览器上的操作，除了看视频和专一写作这两个场景下，根本不会用到全屏。而后盾框架的全屏性能的初衷是为了利用更多的区域，从而在页面上显示更多的内容，所以我做了一个比全屏更好用的最大化性能。

标签页合并

所有反对多标签后盾框架，根本都是通过监听路由变动来动态创建 / 切换标签页，本框架也不例外。

但这就会呈现频繁操作导致标签页数量会剧增，于是我思考标签页是否能够像浏览器的标签页一样，只在一个标签页里切换，于是一个新个性就进去了，你能够比照上面两张图标签栏上的差别。

标签栏拖拽排序

这也是一点小翻新，简直所有反对多标签的后盾框架都没有拖拽排序的性能，顺着只能是顺次向后累加。而我思考到理论应用场景中，可能须要在多个标签页来回切换操作，如果几个标签页相隔甚远，反而升高了操作效率。

表单展现模式疾速切换

这个小个性也是我比较满意的翻新之一

在理论开发中，我常常会应用路由跳转的形式去解决表单详情页，然而如果表单内容量较少，产品经理会心愿把跳转改成弹窗，或者抽屉的模式。这时候改一个页面还好，如果有大量模块须要调整，我整个人都会解体了。

所以我实现了一个能够疾速切换的规范 CURD 模块的模版页面，能够通过简略的配置疾速切换详情表单的展现形式。

对这部分内容感兴趣的能够点这里理解更多。

丝滑的开发体验

在开发中你有没有遇到过，应用某个组件，发现还没引入；调用某个 API，发现还没 import；每开发一个相似的新模块，手动一个个去创立文件。如果有，并且感觉很麻烦，那就借着往下看吧，Fantastic-admin 都帮你思考到。

加强版 <script setup>

在 <script setup> 里无需导入相干 API，该依赖会主动导入（默认反对 vue、vuex 和 vue-router）：

<script setup>
// 原先须要手动 import 相干 API
import {ref, computed} from 'vue'
import {useStore} from 'vuex'
import {useRoute, useRouter} from 'vue-router'

const count = ref(0)
const doubled = computed(() => count.value * 2)

const store = useStore()
store.dispatch('shopCar/getList')

const route = useRoute()
const router = useRouter()
console.log(route.path)
router.push('/dashboard')
</script>

<script setup>
// 当初间接应用即可
const count = ref(0)
const doubled = computed(() => count.value * 2)

const store = useStore()
store.dispatch('shopCar/getList')

const route = useRoute()
const router = useRouter()
console.log(route.path)
router.push('/dashboard')
</script>

除此之外，你还能够在 <script setup> 上间接设置组件名，如 <script setup name="ComponentName">，再也不须要用上面这种形式了：

<script>
export default {name: 'ComponentName'}
</script>

<script setup>
// 业务代码
</script>

更多具体介绍可点这里。

全局组件主动按需加载

全局组件顾名思义就是在应用的时候，无需导入，无需注册，自身就是一种很难受的开发体验。但在 Vue2 版本里，全局组件会在框架运行时就主动导入并注册，导致首屏加载的文件会随着全局组件的增多而越来越大。

而在 Vue3 版本里，对这一问题进行的优化，保留了应用时无需导入，无需注册的开发体验，从底层实现了按需主动导入并注册。

更多具体介绍可点这里。

超过 10 万个 SVG 图标收费应用

你能够在框架中轻松应用 Iconify 里 100 多套图标合集，超过 10 万个的 SVG 图标，并且无需放心我的项目构建体积，因为框架曾经做好解决，构建过程也是按需构建，也就是说你应用到了哪些图标，才会被打包进我的项目内。

更多具体介绍可点这里。

通过命令行疾速生成文件

开发过程中，防止不了手动去频繁创立页面、组件等文件，并且还要在文件里写一些必要的代码，如果你也感觉这件事很麻烦，而且一点也不酷，那么当初有更轻松的形式来解决这所有

就是通过命令行的模式主动生成文件，框架提供了 5 种模式，别离对应创立不同类型的文件。

• page 页面文件
• component 组件文件
• store Vuex 全局状态文件
• mock mock 文件
• module 页面模块文件

这里就演示一下创立一个页面文件的整个流程是怎么样的，更多具体介绍可点这里。

从 vue-element-admin 迁徙

vue-element-admin 做为国内应用人群最多，Github stars 数最高的一款后盾框架，它的胜利和作者的奉献是不可否认的。

但毛病也很显著，就是性能不够丰盛，同时没有 Vue3 版本，并且作者在 2020 年 6 月份公布 4.4.0 版本后再无更新。

如果你当初正是 vue-element-admin 的使用者，看完这篇文章后对 Fantastic-admin 感兴趣，我也提供了一篇《迁徙攻略》，不便你能够疾速将现有我的项目从 vue-element-admin 迁徙到 Fantastic-admin 上。

结束语

做为 Fantastic-admin 的作者，我认为单靠趣味、用爱发电，是无奈反对我长期保持保护上来，所以你也应该发现了，Fantastic-admin 是一款收费与免费并存的产品。

其中根底版保留了后盾框架最罕用的性能，并遵循 MIT 开源协定，可收费应用；而专业版则须要付费购买，并且专业版提供了更多高级的个性，能应答各种场景下的应用。

最初的最初，如果感觉 Fantastic-admin 这个框架不错，或者曾经在应用了，心愿你能够去 Github 或者 Gitee(码云) 帮我点个 ⭐，这将对我是极大的激励。