preface
Do you know how many repositories there are on Github for Vue based backend frameworks alone?
If you search vue admin, you will get 13,120 warehouses. If you use the Vue background, you will get 7,596 warehouses. If you combine the two, you will still get 2,719 warehouses (the search statistics will remain until 2021/1/2).
Of course, if you need to find a background framework to do a project or product, you will probably not go to Github search, there are a lot of domestic articles organized worth using the background framework, such as vue-element-admin, D2-admin, vue-antd-admin and so on. But is that all?
Today, I’d like to officially introduce a framework worthy of your attention in 2021:
Fantastic- Admin – an out-of-the-box framework for Vue’s mid – background management system
Why use it?
There are so many frameworks behind Fantastic- Admin, why is it worth you to know, and what are its highlights? Here is a brief introduction.
Tip: The following sections describe the pro features
Inherited from vue – automation
I introduced the Vue automation template in my previous article “Take this Vue Project template, It will Improve your development efficiency by 50% by 2021”. It integrates many nice features and can be used directly in development, but it must waste too much time. Fantastic- Admin inherits most of the features.
Rich theme and layout
| Double sidebar layout | Head navigation layout | Single sidebar layout |
 |
 |
 |
| The adaptive | Adaptive (with minimum width) | Fixed width in the middle | Fixed width center (with maximum width) |
 |
 |
 |
 |
In addition, there are five built-in theme-style interfaces to choose from
| The default | Vue CLI style | Yards cloud style | Pure and fresh | Simple but elegant |
 |
 |
 |
 |
 |
Of course, custom configuration theme files are also provided to quickly extend a set of custom style themes.
Routing navigation
Generating menu navigation from routing configuration is a prerequisite for the backend framework, but routing configuration also supports external links, tags, permissions, and unlimited levels of page caching.
As for the problem of page caching, I have also written a special article called “Once and for all, Solve the problem of background multi-level routing caching based on Keep-Alive”, if you are interested, you can go to learn about it.
Permission to verify
In addition to permission authentication on routes, it also provides authentication components, authentication instructions, and authentication functions to provide all-round authentication.
Authentication component
For this requirement, the framework provides
and
components, which are used as follows:
<! -- Single permission validation -->
<Auth :value="'department.create'">You have that authority<template slot="no-auth">You don't have that permission</template>
</Auth>
<! -- Multiple permission authentication, as long as the user has any one of the permissions, the authentication is passed -->
<Auth :value="['department.create', 'department.edit']">You have that authority<template slot="no-auth">You don't have that permission</template>
</Auth>
<! -- Multiple permissions authentication, the user must have all permissions, authentication pass -->
<AuthAll :value="['department.create', 'department.edit']">You have that authority<template slot="no-auth">You don't have that permission</template>
</AuthAll>
Copy the codeAuthentication instructions
For individual elements, v-Auth and V-Auth-all authentication instructions are also provided, which makes it easier to compare authentication components and do simpler things.
<! -- Single permission validation -->
<button v-auth="'department.create'">The new department</button>
<! -- Multiple permission authentication, as long as the user has any one of the permissions, the authentication is passed -->
<button v-auth="['department.create', 'department.edit']">The new department</button>
<! -- Multiple permissions authentication, the user must have all permissions, authentication pass -->
<button v-auth-all="['department.create', 'department.edit']">The new department</button>
Copy the codeAuthentication function
Authentication components and directives control whether or not elements are displayed on the page, while authentication functions use more of the permission judgments in the business process code.
// Single permission validation, return true or false
this.$auth('department.create')
// Multi-permission authentication. If the user has any one of the permissions, the authentication succeeds and returns true or false
this.$auth(['department.create'.'department.edit'])
// Multi-permission authentication, the user must have all permissions to pass the authentication, return true or false
this.$authAll(['department.create'.'department.edit'])
Copy the codeMultiple pages (Tab Tab bar)
I think it’s a bit of a drag, and the experience isn’t as good as the browser’s native TAB bar, but we need it. And this feature, in my opinion, kills almost all other frameworks in this category right now. Here’s a quick illustration:
internationalization
Internationalization support is also available, with simplified Chinese, traditional Chinese and English language packages provided by default.
The last
In addition to the above mentioned features, it also supports mock, CDN, GZip and other features, which will not be described in detail