前言如果你还没有听说过2021年的Fantastic-admin，那么在即将到来的2022年千万不要错过它。Fantastic-admin，作为一个out-开箱即用的Vue中后台管理系统框架，已经对外开放一年多了。这一年里，我们服务了上百个团队和个人开发者，用在了近千个产品和项目中（保守估计）。其中，有刚步入社会的新人，使用Fantastic-admin写了一个实践项目，成功找到了工作；大型地方国企/事业单位也有Fantastic-admin。而在这一年，Fantastic-admin也正式从Vue2升级到Vue3，采用了官方推荐的构建工具Vite，新增并优化了诸多新特性，应用场景更加广泛，开发体验更加流畅。随着文档的不断完善，无论是作为学习参考还是实际应用，相信都会有所收获。接下来我会从几个方面来介绍框架的特点，我会尽快收藏~开箱即用什么是“开箱即用”？也就是说，即使不看文档，也可以根据文件夹布局和代码注释快速开发业务功能。作为框架的作者，我一直坚信，只要自己不偷懒，用户也可以偷懒。所以为了降低用户的入门成本，在开发初期对比了大量类似的后台框架，包括文件夹布局和命名，尽量符合用户的直觉，或者习惯的开发商。用人的话来说：在开发过程中，如果你想在某个模块下找到一个文件，认为它应该在该目录下，那么它就会在你认为的目录下。当然，除了容易上手适合新手，对于高级开发者来说，代码中也有详细的注释，结合文档中的介绍，让你快速了解设计逻辑和实现某个功能点的框架。有使用文档，代码里有注释，还缺什么？是的，这是一个视频教程。考虑到大量后端开发者也在使用Fantastic-admin，我能理解学习一项新技术时最初的困惑，因为可能连介绍性的文档都不一定能马上看懂，而且开发环境非常复杂。鼓捣了很久，所以也准备了几个快速上手的视频教程（目前视频教程只有Vue2版本，Vue3版本的视频教程明年会出）。丰富的配置项如何在保证简单易用的前提下，让功能更加丰富完善？该配置必须贯穿整个框架。框架配置，比如布局、主题、标签栏、面包屑导航等，你可以在框架配置文件中配置几乎所有的功能，并且框架已经最大程度的优化，让配置项足够简单明了，比如大部分的配置都是布尔开关，如下图（部分）：相比之下，在项目运行时，也可以直接在浏览器中实时查看不同配置项的实际效果（部分）：为了方便配置环境，不同的生产环境可能需要不同的构建配置，框架也提供了一些打包构建相关的配置，方便快速切换。路由（导航）配置大多数后台框架都是通过路由配置来生成侧边导航栏的，本框架也不例外，但最大的区别在于Fantastic-admin的配置参数足够丰富。例如，除了设置导航图标外，还可以设置导航激活时的图标；包括更智能的页面缓存配置（下面详细描述）；以及设置是否为每个路由页面显示底层网站的版权信息等。页面缓存、权限、国际化、错误日志报告、自定义字体、PWA应用等高级功能，只要你想用它们，你不需要自己去集成，框架都有。页面缓存三级（多级）路由缓存是后台框架中最常见的痛点，也是难以解决的痛点。Fantastic-admin提供了一个新的概念叫做路由扁平化，并提供了框架内的最佳实践。路由扁平化的概念其实就是将多级路由转化为二级路由，但保留路由原有的层级结构（用于导航栏展示）。我在去年的这篇《一劳永逸，解决基于 keep-alive 的后台多级路由缓存问题》文章中实践验证了这个方案成功。路由扁平化后的效果+------------------------++----------------------+|布局||布局.vue||+--------------------+||+--------------------+|||空||+---------->||页||||+---------------+|||||||||页||||||||+------------+|||||||+------------------+||+----------------+|+----------------------++------------------+现在在最新的Vue3版本中，进一步优化了页面缓存，通过简单的路由配置即可开启页面缓存，而且会比同类后台框架更加智能。比如可以根据一个页面的离开和跳转到不同的页面进行不同的处理。比如A页面跳转到B页面时，A页面会被缓存，A页面跳转到C页面时，A页面不会被缓存。有关更多详细信息，请单击此处。权限提供4种认证方式，涵盖开发中的每一个认证场景：更详细的路由权限认证组件、认证说明和认证功能介绍，请点击这里。国际化与element-plus内置的国际化深度融合，在切换语言时，可以同时切换框架本身和element-plus提供的语言包。有关更多详细信息，请单击此处。错误日志上报可以全局拦截业务代码的错误上报，提供一种上报方式，方便生产环境线上问题的定位。有关更多详细信息，请单击此处。十亿个细节这些细节单独来看可能不值一提，但正是因为有这些细节，框架才更加出众。整个站点前端简单的动效可以大大提升交互体验，这也是我无论在项目还是产品中都热衷于添加一些小而美的动效的原因。在框架中，细心的你会发现，每一个地方都可能有加载、切换、显示隐藏等动态效果的加持。同时，为了不让特效压垮，我遵循官方的MaterialDesign动画指南，将所有动画效果的执行时间严格控制在150ms到300ms之间。部分动画效果如下图所示。更详细的介绍可以参考我之前整理的一篇文章《我是如何设计后台框架里那些锦上添花的动画效果》。全局搜索全局搜索可以搜索侧边栏导航，让您快速进入想要的模块页面。这个功能并不新鲜，我在这个基础上加入了快捷键支持，让整个搜索过程尽量停留在键盘上，而不是在键盘和鼠标之间反复来回切换。选项卡最大化许多背景框架具有全屏功能。借助这个浏览器级别的API，进入全屏后会覆盖整个显示，相当于手动按F11。但是良心评论说浏览器上的操作除了看视频和专心写字这两个场景，基本不用全屏。背景框全屏功能的初衷是为了利用更多的区域在页面上显示更多的内容，所以我做了一个比全屏更有用的最大化功能。标签页合并所有支持多标签的后台框架基本上都是通过监听路由变化动态创建/切换标签页，本框架也不例外。但是频繁的操作会导致tab数量激增，于是想着能不能像浏览器的tab一样，只在一个tab中切换tab，于是一个新的feature出来了，大家可以比较下标签上的区别两个图的条形图。标签栏的拖拽排序也是一个小创新。几乎所有支持多tab的后台框架都没有拖拽排序的功能，只能一路倒退。而且我考虑到在实际使用场景中，可能需要在多个标签页之间来回切换。如果多个标签页相距较远，反而会降低操作效率。表单显示方式快速切换这个小功能也是我比较满意的创新点之一。在实际开发中，我经常使用路由跳转来处理表单详情页，但是如果表单内容很小，产品经理想把跳转改成弹窗或者抽屉。这时候换一个页面就可以了。如果需要调整的模块很多，我整个人都要崩溃了。所以我实现了一个可以快速切换的标准CURD模块的模板页面，可以通过简单的配置快速切换明细表的显示方式。如果您对这部分内容感兴趣，可以点击这里了解更多。丝滑的开发体验你是否遇到过在开发中，使用了某个组件，却发现没有导入；调用某个API，发现没有导入；每次开发类似的新模块，手动一个一个创建文件。如果有，你觉得麻烦，那往下看，Fantastic-admin会帮你考虑的。另外也可以直接设置exportdefault{name:'ComponentName'}更多详情，请点击此处。全局组件按需自动加载。顾名思义，全局组件在使用时不需要导入或注册。这本身就是一种非常舒适的开发体验。但是在Vue2版本中，全局组件会在框架运行时自动导入注册，导致首屏加载的文件随着全局组件的增多越来越大。在Vue3版本中，对该问题的优化保留了使用时无需导入注册的开发体验，从底层实现按需自动导入注册。有关更多详细信息，请单击此处。超过100,000个SVG图标免费使用您可以轻松使用Iconify中的100多套图标集合，框架中超过100,000个SVG图标，无需担心项目的构建量，因为框架已经处理好了，构建过程也是按需Build，也就是说你用了哪些图标，就会打包到工程中。有关更多详细信息，请单击此处。在通过命令行快速生成文件的开发过程中，免不了要经常手动创建页面、组件等文件，还要在文件中写入一些必要的代码。如果你也觉得这样很麻烦，一点也不酷，那么现在有一种更简单的方法来处理这一切，那就是通过命令行自动生成文件。框架提供了5种模式，分别对应创建不同类型的文件。page页面文件组件组件文件存储Vuex全局状态文件mockmock文件模块页面模块文件这里演示创建页面文件的全过程。有关更多详细信息，请单击此处。从vue-element-admin迁移而来vue-element-admin是国内使用量最大，Githubstar数最多的后台框架。它的成功和作者的贡献是不可否认的。但是缺点也很明显，就是功能不够丰富，而且没有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（码云）帮我下单?，对我来说是一个莫大的鼓励。
