preface

If you haven’t heard of fantastic-admin in 2021, don’t miss it in 2022.

It’s been a little over a year since Fantastic Admin was first released to the public as an out-of-the-box framework for Vue’s middle and back end management system. In the past year or so, we’ve served hundreds of teams and individual developers in nearly a thousand products and projects (a conservative estimate). Some of them are new to the society, wrote a Fantastic-admin exercise program and successfully found a job; Fantastic- Admin is also found in local state-owned enterprises/public institutions.

In this year, Fantastic-Admin was officially upgraded from Vue2 to Vue3, adopting the official recommended build tool Vite, adding and optimizing many new features, making the application scenarios more extensive and the development experience more silky. With the continuous improvement of the documentation, whether for learning reference, or practical application, I believe that there will be harvest.

Next, I will introduce the features of the framework from several aspects, and I will add a few more

Out of the box

What is “out of the box”? Even without looking at the documentation, you can quickly get started developing business features based on folder layouts and code comments.

As a framework author, I’ve always believed that as long as I’m as lazy as possible, the user can be as lazy as possible. Therefore, in order to reduce the user entry cost, we compared a large number of similar background frameworks in the early stage of development, including folder layout and naming, to meet the user’s intuition as much as possible, or the habit of developers. In words: Let you in the development process, if you want to find a file under a module, think it should be in a directory, it is in the directory you want.

Of course, in addition to simple, suitable for beginners, for senior developers, there are detailed notes in the code, with the introduction of the document, so that you can quickly understand the design logic and implementation of the framework of a certain function point.

The usage is documented, the code is commented, what’s missing? Yeah, video tutorials. Considering that a large percentage of back-end developers use Fantastic-Admin, I can understand the initial confusion of learning a new technology because the introductory documentation may not be immediately understandable and the development environment may take a long time to develop. So I have prepared several quick start video tutorials (currently only Vue2 version of the video tutorials, Vue3 version of the video tutorials will be produced next year).

Rich configuration items

How to keep it simple and easy to use, but still make it rich and perfect? That configuration must run through the framework.

Framework configuration

Layout, themes, TAB bars, breadcrumb navigation, and almost everything else can be configured in the framework configuration file, and the framework has been optimized to make the configuration items simple and straightforward. For example, most of the configuration items are Boolean switches, as shown (in part) below:

In contrast, you can view the actual effects of different configuration items directly in the browser in real time while the project is running (partially) :

Environment configuration

To facilitate different build configurations that may be required for different production environments, the framework also provides partial package build-related configurations for quick switching.

Routing (navigation) configuration

Most background frameworks use the mode of route configuration to generate the side navigation bar, and this framework is no exception, but the biggest difference is that Fantastic-admin configuration parameters are rich enough. For example, in addition to setting the navigation icon, you can also set the icon when the navigation is activated. Including smarter page caching configurations (more on that below); And can set the bottom of each routing page website copyright information is displayed and so on.


Advanced features

Features such as page caching, permissions, internationalization, error log reporting, custom fonts, PWA applications, etc. are all available in the framework if you want to use them without having to integrate them yourself.

Page caching

Tertiary (multilevel) route caching is one of the most common and difficult pain points of background frameworks, and Fantastic- Admin offers a new concept called routing flattening and provides best practices within the framework.

In fact, the concept of route flattening is to convert multi-level routes into two-level routes, but retain the original hierarchical structure of routes (for display in the navigation bar). This scheme has been successfully implemented and verified in my article “Once and for all, Solving the Problem of Background Multi-level routing Caching based on Keep-Alive” last year.

The effect after routing flattening treatment + -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- + + -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- + | Layout | | Layout. The vue | | + -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- + | | +-------------------+ | | | Empty | | +----------> | | Page | | | | +-------------+ | | | | | | | | | Page | | | | | |  | | | +-------------+ | | | | | | | +-------------------+ | | +-------------------+ | +-------------------------+ +-------------------------+Copy the code

Now in the latest version of Vue3, page caching has been further optimized, enabling page caching with simple routing configuration and making it smarter than other background frameworks. For example, if A page goes to another page, page A is cached. If A page goes to page C, page A is not cached.

More details can be found here.

permissions

Four authentication modes are provided to cover each authentication scenario in development:

  • Routing permissions
  • Authentication component
  • Authentication instructions
  • Authentication function

More details can be found here.

internationalization

Deep integration with Element-Plus’s built-in internationalization allows the framework to switch languages simultaneously with the language packs provided by Element-Plus.

More details can be found here.

Error Log Reporting

Intercepts service code errors globally and provides a reporting method to locate online problems in the production environment.

More details can be found here.

Billions of details

These details, taken individually, may not be worth mentioning, but they are what make the framework stand out.

Site dynamic effect

The front end can greatly improve the interactive experience through simple motion effects, which is why I am keen on adding small and beautiful motion effects in both projects and products.

In the framework, if you are careful, you can see that there are dynamic benefits everywhere, such as loading, switching, hiding, and so on. At the same time, in order not to let the special effects dominate, I follow the official Material Design motion effect guidelines and strictly control the execution time of all motion effects between 150ms and 300ms.

Here are some examples of animation effects. For more details, see an article I compiled before, “How I designed the icing on the cake animation effects in the background frame.”



Global search

Global search searches the sidebar navigation for quick access to the desired module page. This isn’t a new feature, but I’ve added shortcut support to keep the search process as keyboard focused as possible, rather than having to repeatedly switch back and forth between the keyboard and mouse.

TAB page maximizing

Many background frameworks have full screen functionality, and with the help of the browser-level API, going to full screen will cover the entire display, just like pressing F11 manually.

But, except for the two scenarios of watching videos and focusing on writing, the browser rarely uses full screen, according to The review. The original intention of the full-screen feature of the background framework was to use more area to display more content on the page, so I made a maximized feature that works better than full-screen.

TAB page merge

All background frameworks that support multi-label are basically used to dynamically create/switch TAB pages by listening to routing changes, and this framework is no exception.

But there was a lot of manipulation that led to a huge increase in the number of tabs, so I wondered if tabs could switch between one TAB, like browser tabs, and a new feature came out. You can compare the difference between the tabs in the two images below.


TAB bar drag sort

This is also a small innovation, almost all the background frameworks that support multi-label do not have drag-and-drop sorting function, along can only be added backwards. However, I consider that in actual use scenarios, it may be necessary to switch between multiple tabs. If several tabs are far apart, the operation efficiency will be reduced.

Quick switching of form display mode

This small feature is one of the innovations I’m happy with

In real development, I often use routed jumps to handle the form details page, but if the form is small in volume, the product manager will want to change the jump to a popover, or drawer. It’s fine to change a page at this point, but if I have a lot of modules to tweak, I’ll crash.

Therefore, I implemented a standard CURD module template page that can be switched quickly, and the display mode of details form can be switched quickly through simple configuration.

For those of you interested in this section, click here to learn more.

Silky development experience

Have you ever used a component in development that hasn’t been introduced yet? Call an API and find no import yet; Each time you develop a similar new module, manually create the files one by one. If so, and you’re bothered, read on for Fantastic-admin.

enhanced<script setup>

There is no need to import the API in 

<script setup>
// You need to manually import the 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>
Copy the code
<script setup>
// Now use it directly
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>
Copy the code

You can also set component names directly on 

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

<script setup>
// Business code
</script>
Copy the code

More details can be found here.

Global components are automatically loaded on demand

Global components, as their name suggests, require no import or registration at the time of use, which in itself is a comfortable development experience. In the Vue2 version, however, global components are automatically imported and registered while the framework is running, resulting in the first screen loading of files as more global components are added.

In the Vue3 version, the optimization of this problem retains the development experience without import or registration, and realizes automatic import and registration on demand from the bottom layer.

More details can be found here.

More than 100,000 SVG ICONS are free to use

You can easily use Iconify’s 100 + icon collection, over 100,000 SVG ICONS in your framework, and you don’t have to worry about the size of your project because the framework is already handled and the build process is built on demand, meaning which ICONS you use are packaged into your project.

More details can be found here.

Quickly generate files through the command line

If you find it annoying and uncool to constantly create pages, components, and other files manually during development, there is now an easier way to do it

The framework provides five modes for creating different types of files.

  • pagePage file
  • componentComponent files
  • storeVuex global status file
  • mockThe mock file
  • modulePage module file

Here is an example of how the entire process of creating a page file works. More details can be found here.

From the vue – element – admin migration

Vue-element-admin as a background framework with the largest number of users and the highest number of Github stars in China, its success and the author’s contribution are undeniable.

However, the disadvantages are also obvious, that is, the feature is not rich enough, and there is no Vue3 version, and the author has not updated since the release of version 4.4.0 in June 2020.

If you’re a vue-element-admin user right now and you’re interested in Fantastic-admin after reading this article, I’ve also provided a migration guide. This allows you to quickly migrate existing items from vue-element-admin to Fantastic-admin.

conclusion

As the author of Fantastic- Admin, I believe that interest and love alone cannot support my long-term maintenance, so you should also find that Fantastic- Admin is a free and charged product.

The basic version retains the most commonly used functions of the background framework, and follows the MIT open source agreement, which can be used for free. The pro version costs a fee and offers more advanced features that can be used in a variety of scenarios.

Finally, if you think Fantastic-admin framework is good, or you are already using it, I hope you can go to Github or Gitee and click ⭐ for me, which will be a great encouragement to me.