乐趣区

关于前端:别再费劲去找后台的前端框架了2021-年就用-Fantasticadmin-吧

jiezi

前言

你晓得光是基于 Vue 的后盾框架在 Github 上有多少个仓库么？

如果你搜寻 vue admin 会失去 13120 个仓库，如果用 vue 后盾 会失去 7596 个仓库，如果把两者联合一下，搜寻 vue admin 后盾 也还是能失去 2719 个（以上搜寻统计截止至 2021/1/2）。

当然，如果你须要找一款后盾框架用来做我的项目或者是产品，大概率你不会上 Github 现搜，国内有很多文章整顿过值得一用的后盾框架，例如 vue-element-admin、d2-admin、vue-antd-admin 等等，但只有这些了么？

明天，就给大家正式介绍一款值得 进入你收藏夹吃灰 你在 2021 年关注的后盾框架：

Fantastic-admin —— 一款开箱即用的 Vue 中后盾管理系统框架

为什么要用它？

后盾框架这么多，Fantastic-admin 为什么值得你去理解，它又有什么亮点，上面就简略介绍一下。

Tip：以下局部介绍为专业版性能

继承自 vue-automation

我在之前的《收下这款 Vue 我的项目模版，它将让你的开发效率在 2021 年进步 50%》这篇文章里介绍过 vue-automation 这款 Vue 我的项目模版，它集成了很多不错的个性能够不便在开发中间接应用，而必备节约太多工夫，而 Fantastic-admin 也继承了大部分个性。

丰盛的主题与布局

双侧边栏布局 头部导航布局 单侧边栏布局
<img src=”https://hooray.gitee.io/fantastic-admin/basic-layout-default.png” /> <img src=”https://hooray.gitee.io/fantastic-admin/basic-layout-header.png” /> <img src=”https://hooray.gitee.io/fantastic-admin/basic-layout-without-main-sidebar.png” />
自适应 自适应（有最小宽度） 定宽居中 定宽居中（有最大宽度）
<img src=”https://hooray.gitee.io/fantastic-admin/layout_1.gif” /> <img src=”https://hooray.gitee.io/fantastic-admin/layout_2.gif” /> <img src=”https://hooray.gitee.io/fantastic-admin/layout_3.gif” /> <img src=”https://hooray.gitee.io/fantastic-admin/layout_4.gif” />

除此之外，还提供了 5 款内置主题格调的界面能够抉择

默认 Vue CLI 格调 码云格调 清爽 素雅
<img src=”https://s3.ax1x.com/2021/01/02/sSUJRP.png” /> <img src=”https://s3.ax1x.com/2021/01/02/sSNO5n.png” /> <img src=”https://s3.ax1x.com/2021/01/02/sSNqEj.png” /> <img src=”https://s3.ax1x.com/2021/01/02/sSN7Dg.png” /> <img src=”https://s3.ax1x.com/2021/01/02/sSNHbQ.png” />

当然，也提供的自定义配置主题的文件，可疾速扩大一套自定义格调的主题。

路由导航

通过路由配置生成菜单导航是后盾框架的必备性能，除此之外，路由配置还反对外链、标记、权限等性能，并且还反对有限层级的页面缓存。

对于页面缓存的问题，之前我也特地写过一篇文章叫《一劳永逸，解决基于 keep-alive 的后盾多级路由缓存问题》，感兴趣的小伙伴能够返回理解。

权限验证

除了路由上的权限验证外，还别离提供了 鉴权组件 、 鉴权指令 和鉴权函数，提供全方位鉴权。

鉴权组件

页面中某个模块，以后用户具备该权限是如何显示，不具备该权限又是如何显示，针对这样的需要，框架提供了 <Auth> 和 <AuthAll> 组件，具体应用如下：

<!-- 单权限验证 -->
<Auth :value="'department.create'">
    你有该权限
    <template slot="no-auth">
        你没有该权限
    </template>
</Auth>

<!-- 多权限验证，用户只有具备其中任何一个权限，则验证通过 -->
<Auth :value="['department.create','department.edit']">
    你有该权限
    <template slot="no-auth">
        你没有该权限
    </template>
</Auth>

<!-- 多权限验证，用户必须具备全副权限，才验证通过 -->
<AuthAll :value="['department.create','department.edit']">
    你有该权限
    <template slot="no-auth">
        你没有该权限
    </template>
</AuthAll>

鉴权指令

对于单个元素，也提供了 v-auth 和 v-auth-all 鉴权指令，应用上比照鉴权组件更不便，当然它能做的事件也更简略。

<!-- 单权限验证 -->
<button v-auth="'department.create'"> 新增部门 </button>

<!-- 多权限验证，用户只有具备其中任何一个权限，则验证通过 -->
<button v-auth="['department.create','department.edit']"> 新增部门 </button>

<!-- 多权限验证，用户必须具备全副权限，才验证通过 -->
<button v-auth-all="['department.create','department.edit']"> 新增部门 </button>

鉴权函数

鉴权组件和鉴权指令管制的是页面上的元素是否展现，而鉴权函数则更多是应用在业务流程代码里的权限判断。

// 单权限验证，返回 true 或 false
this.$auth('department.create')

// 多权限验证，用户只有具备其中任何一个权限，则验证通过，返回 true 或 false
this.$auth(['department.create', 'department.edit'])

// 多权限验证，用户必须具备全副权限，才验证通过，返回 true 或 false
this.$authAll(['department.create', 'department.edit'])

多页面（Tab 标签栏）

尽管我集体感觉这个性能挺鸡肋的，实际效果体验也不如浏览器原生的 tab 标签栏，但咱得有这性能。并且这性能目前在我看来，简直秒杀了其它同类框架，用一张图简略演示下吧：

国际化

国际化的反对当然也不能少，默认提供了 简体中文 、 繁体中文 和英语 三种语言包。

最初

除了以上介绍的外，还反对 mock、CDN、GZip 等个性，就不一一具体介绍了，欢送感兴趣的小伙伴能够来详情理解并应用 Fantastic-admin

退出移动版