If you don’t already know what fantastic-admin is, let me show you a few preview images.

If you’re interested, check out the preview here. It’s a complete, out-of-the-box backend framework that just released support for Vue3.

Return to the chase

Vue-element-admin, as a well-known background framework, is the first choice of many developers who are new to background development. However, since the author does not seem to pay much attention to this work, and there is no trend of Vue3 version. As a result, nearly a thousand unclosed issues have accumulated in the Github repository.

Many of the problems encountered by developers in the process of use, the solution provided in the community is to modify the framework source code, which has led to the emergence of many vue-element-admin based magic versions on the market. But most of them are only minor modifications. If you want to modify the design of the frame itself, it will affect the whole body. These were some of my early experiences with vue-element-admin, which led me to decide to write my own highly configurable background framework.

Although the above is my experience of a few years ago, I believe that there are still many developers using Vue-element-admin. Some of them want to find an alternative product, but they don’t want the migration process to be too difficult. After all, the migration process is based on understanding the differences between the two frameworks so that the migration can work properly.

Therefore, this article will introduce the differences between vue-element-admin and Fantastic-admin in detail as much as possible, and give a little reference to those who are still hesitant to replace vue-element-admin.

Since Fantastic- Admin already provides Vue3, this article will take Vue3 as the final migration target. Of course, the Vue2 version will work in most cases.

The preparatory work

First, you need to prepare a Vue3 version of the template source code, and ensure that it can be launched locally.

# The simplest way, clone a source to the local
git clone -b template https://gitee.com/hooray/fantastic-admin.git

# Then enter the project
cd fantantic-admin

# install dependencies
pnpm install

# run
pnpm run dev
Copy the code

Secondly, it is recommended that you read the Fantastic- Admin document in its entirety to get a general understanding of it before you read the following differences.

differences

Environment configuration

Vue-element-admin is very simple, so only VUE_APP_BASE_API can be set in the environment. VITE_APP_API_BASEURL is used in Fantastic-admin.

Of course, Fantastic admin also provides a series of configuration, such as the page title, debugging tools, build compression, etc. For details, see “Configuration – Environment Configuration”.

Framework configuration

Vue-element-admin provides a total of only 6 configuration items (title showSettings tagsView fixedHeader sidebarLogo errorLog), and most of them are layout Settings. I suggest you refer to the Fantastic-admin framework configuration file directly for this part, we provide a richer interface layout Settings.

The theme

Unfortunately, vue-element-admin doesn’t have a theme color scheme, whereas Fantastic-admin has a custom theme color scheme. See Theme for more details.

Global resources

SVG icon

Vue-element-admin will store the SVG file in./ SRC/ICONS/SVG /. This part of the SVG file can be directly copied to Fantastic-admin./ SRC /assets/icon/. We also provide a < SVG-icon /> component for direct use. See Global Resources – SVG ICONS for details.

The picture

Vue-element-admin stores the images in./ SRC /assets/./ SRC /assets/images/ of Fantastic-admin.

The elves figure

This is a feature provided by Fantastic-admin separately. If you are using a lot of small images in your project, you can use Sprite images to combine the small images into one large image and use CSS background image positioning to display them. For details, see “Global Resources – Sprite Images”.

style

Vue-element-admin stores styles in the./ SRC /styles/ directory. This directory is used to store framework-related styles. Copy these files into the./ SRC /assets/styles/ directory of fantastic-admin and import them where they are used.

Another Fantastic – admin also provides a. / SRC/assets/styles/resources/directory is used to store SCSS resources alone, the files in the directory will be introduced framework automatically, can be used directly on the page, the global resources – style to be read in detail.

component

Vue-element-admin stores the component in the./ SRC /components/ directory and requires a separate registration, whereas fantastic-admin’s global component is automatically registered when used. The effect is the same as vue-element-admin, but the experience is better. You can use the global component in the same fantastic-admin./ SRC /components/ directory. See Global Resources – Components for more details.

Interact with the server

Vue-element-admin’s./ SRC /utils/request.js corresponds to fantastic-admin’s./ SRC/API /index.js file, which encapsulates axios. For uniform processing of POST and GET requests, you can migrate your code line by line based on your existing configuration.

In addition, vue-element-admin’s./ SRC/API/directory stores separate files split by modules, which is convenient for unified management of all interface requests of different modules, which is very necessary in large projects. Fantastic-admin does not provide a specific directory. If you have the need, you can create a folder to manage this section of files.

routing

Fantastic-admin uses vue-element-admin’s route to generate navigation bars, adding navigation parameters to the route, but putting additional navigation parameters in the meta object. The table below is a quick guide to the vue-element-admin and Fantastic-admin configurations.

vue-element-admin Fantastic-admin instructions
hidden meta.sidebar Whether it is displayed in the navigation bar
alwaysShow / This setting is not provided because it is handled automatically in Fantastic-admin
meta.roles meta.auth Fantastic-admin is compatible with vue-element-admin’s permission design mode and provides a more advanced permission mode
meta.title meta.title Navigation title
meta.icon meta.icon The navigation icon
meta.noCache meta.cache Vue-element-admin’s noCache and fantasy-admin’s cache are both page caching configurations, but the logic behind them and the way they are used are completely different
meta.breadcrumb meta.breadcrumb Whether it shows up in the breadcrumb navigation
meta.affix / If the tabs are fixed, in Fantastic-admin the tabs can be fixed manually by right-clicking the tabs instead of being fixed in the route configuration
meta.activeMenu meta.activeMenu Highlight the specified navigation

In addition to the above vue-element-admin configuration items, Fantastic-admin provides a number of additional configuration items, which can be found in route-Navigation Configuration.

Page caching

In Fantastic-admin you can understand that there is only a secondary route cache because we have a feature that no matter how many levels a route is configured, it will be treated as a secondary route, but rest assured that only routes are treated as a secondary route, while navigation and breadcrumb navigation remain the same hierarchy.

The purpose of this approach is to completely solve the problem of multi-level routing caching, which I’m sure you have encountered in vue-element-admin. There are many different solutions in the community, but there is no single solution.

So Fantastic- Admin offers a one-size-fits-all solution, as detailed in Page Caching.

The last

This migration document is only a brief description of the whole, the migration project is a huge project after all, there will be all kinds of unpredictable problems in the process, it is suggested to add a discussion group to seek help freely.