Upgrade the last piece of the Vue3 puzzle

This is ali Mom front-end technology Department. We released the Vue conversion plug-in based on the code conversion tool GoGoCode (Ali Mom made a new tool to help you change the Vue2 code to Vue3), which can help you upgrade the code of Vue2 in the project to Vue3. But we also got a lot of feedback from friends: I used ElementUI based on Vue2, it didn’t support Vue3 yet, and I upgraded my business code and it didn’t work.

Today, Element Plus, a Vue3 version of ElementUI, is officially released. It is mostly compatible with the ElementUI API, but there are also some breaking changes. We bring you the Gogocode-element-Plugin, which can automatically modify your project code to fit all breaking changes, greatly reducing your upgrade effort.

The last piece of the puzzle is in place!

A major project to upgrade the actual combat

To ensure that our transformation rules can be adapted to complex scenarios, we chose vue-element-admin, the popular Vue2 + ElementUI project in the community, which covers most of the uses of Vue2 and Element, Let’s try converting it to a Vue3 + Element Plus plugin!

Do a good version control and use a new branch

For comparison purposes, our next command will make the conversion tool overwrite your original code. We recommend that you switch to a new branch operation. If your code is not hosted by Git, do not export it in the same directory.

git checkout -b to-vue3
Copy the code

Install gogocode – cli

npm install gogocode-cli -g
Copy the code

Format the source code for easy comparison of code changes

Because code may change format after being modified by the AST, it is advisable to format all source code with Prettier so that it can be compared with the converted version.

gogocode -s ./src -t gogocode-plugin-prettier  -o ./src
Copy the code

When prompted to overwrite the source code, type y enter

After Prettier, the code is unified into the same format:

Commit this change to Git

Use tools to convert code from Vue2 to Vue3

This time we used the gogocode-plugin-vue plugin to upgrade the project code from Vue2 to Vue3:

gogocode -s ./src -t gogocode-plugin-vue  -o ./src
Copy the code

This project has 258 files, and the conversion program is working hard:

Conversion complete! 151 files were changed, which would have been untenable if you had changed your hair by hand.

You can see that some life cycles have been transformed:

Slot and filter syntax are also not a problem:

Functional components have been changed beyond recognition:

Go through each file, commit and proceed to the next step if there are no major problems!

Some of the things that may need to be changed manually can be referred to here: areas of concern, but it is advisable to care about these details only when you are finally able to run.

Use tools to convert code from ElementUI to Element Plus

We use the gogocode-element-plugin to upgrade the project code from ElementUI to Element Plus:

gogocode -s ./src -t gogocode-plugin-element  -o ./src
Copy the code

Here’s the official summary: Element Plus isn’t compatible with changes, and the Gogocode-element-plugin covers almost all rules.

The plugin takes care of the conversion automatically

  • Icon is converted from class mode to component mode, and components are automatically imported

  • Component automatic renaming

  • Parameter automatic rename

  • Automatic property renaming

  • Imports automatically change from element-UI to element-plus

Manual modification

These only require one – time, single – file changes to be done manually

package.json

Element – UI element – plus

If you use ICONS, don’t forget to attach @elemental-plus/ICONS as well

CSS is introduced into
import 'element-plus/theme-chalk/index.css'
Copy the code

Upgrade dependencies and builds

Everyone’s build environment is different, so you can update the vue and vue-cli versions in package.json with the following command:

gogocode -s ./src -t gogocode-plugin-vue  -o ./src
Copy the code

I have encountered some problems in upgrading webpackage 4 to Webpackage 5, which have been solved by referring to vue-CLI upgrade documents.

Try it out and make further corrections based on errors

Run the project and see what bugs there are and fix them one by one, some from third-party components, some from the build. For a project of this size I changed about 100 lines to look like: COMMIT

Then I saw what I was looking for:

I hope to get your feedback

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…

Nail group: 34266233

Finally: Star support!

Github:github.com/thx/gogocod… (This project is in packages/ gogocode-plugin-Element/directory)

Liverpoolfc.tv: gogocode. IO