With the last piece of the puzzle in place…

Earlier we released the Element to Element Plus conversion plugin based on the conversion tool GoGoCode (the last piece of the Vue3 puzzle, try this tool to automatically upgrade your old Element project), in conjunction with the previously released Vue conversion plugin, It can automatically upgrade your Element+Vue2 project to ElementPlus+Vue3 project. I was excited to write that the last piece of the puzzle has been put in place!

In this article, we used vue-element-admin as an example of how to use our tool. It was meant to be an example, but we underestimated the popularity of the project, and many people added the tag group (34266233) : My project started from this project, and I just need the Vue3 upgrade plan of that project.

A good jigsaw puzzle is always pieced together again and again. In this case, we will refine the example and make a Vue3 version of vue-element-Admin with the help of tools and some manual modifications. If you need vue-element-Admin, you can use it directly. This project is fully powered by Vue3+ElementPlus, with the same functionality as the original, and you can use the new features as much as you like!

First above:

For friends who want to upgrade existing projects, I also record the whole process below for reference.

Start work!

The automatic upgrade part of using GoGoCode has been clearly written in the previous article and will not be covered here

Manual modification

Upgrade runtime dependencies

This is mainly about upgrading Vue2 and accessories to Vue3 and accessories, and element-UI to Element-Plus

Upgrade build dependencies

We mainly upgraded @vue/ CLI-service from 4 to 5 and the corresponding Webpack from 3 to 5, so that we will have to change some of the build process later.

Upgrade Construction Process

Modify vue.config.js to update the configuration for WebPackage 5

Remove poorly supported plugins, some of which are incompatible with Webpack5 and some of which are already built in.

Introducing changes to CSS

src/styles/element-variables.scss

Import file change

Make sure window.$vueApp = vue.createApp (App) is first, then change some imported files that depend on the Vue instance to functions, and pass App.

Routing changes

The latest version of vue-Router no longer supports the preceding no/and * methods, we changed them:

The addRoutes method has been removed and replaced with another method:

Fixed icon issues

The original icon is in the form of iconfont, so dynamic string introduction is supported. In order to be compatible with string introduction, a map index is made to all components:

Router and Transition shared adjustments

In Vue3, the two should be shared with a

outside of < Transition >

Remove original dark magic and introduce CSS variables

The original author used a dark magic to import CSS variables from SCSS files into js. It didn’t work very well in Webpack5, so it was simply pasted into js.

Fixed style alignment issues caused by some component upgrades

The above codes can be seen in commits: github.com/gogocodeio/…

Project address: github.com/gogocodeio/…

Welcome to taste fresh, feedback questions ~

Upgrade problem, welcome to the group for help!

We hope that GoGoCode and the accompanying code conversion tool can help you to do less of the same work and go home early. If you encounter any problems, please contact us at:

Issues: github.com/thx/gogocod…

There are many warm-hearted friends in this group

Finally: Star support!

Github:github.com/thx/gogocod…

Liverpoolfc.tv: gogocode. IO