Some time ago, our team released a tool: Ali’s mother made a new tool to help you change the code from Vue2 to Vue3

This tool uses GoGoCode as a way of code conversion to help migrate Vue2 projects to Vue3. After the release, we received a lot of feedback from our community friends and fixed many problems, but the most common feedback we heard was: “My component library does not support Vue3 yet, my business code upgrade is useless!”

We actually have this problem… Below is our in-house project scheduling platform LaLaLine (see the lineage name), which uses the Vue2 + iView technology stack

When we upgraded it to Vue3, we were hampered by iView, which is a very useful component library, but there seems to be no plan to upgrade Vue3. The component library is so heavily dependent that our project won’t run without it.

In fact, the component library is also a project built based on Vue2. We can’t help but think, can we try to directly apply the GoGoCode transformation to the iView component library? The component library will use the Vue function more deeply and flexibly, which can also check the quality of our transformation tool.

Building is the first step

Vue2 and Vue3 are built differently, and to make the converted Vue3 code run smoothly, we first need to modify the build process.

According to the official website, in addition to changing the version number of Vue from 2 to 3, we also need to use @vue/compiler-sfc to replace the original Vue-template-compiler. After replacing the Vue /compiler-sfc, we found that it did not run. @vue/ compiler-SFC requires Webpack4 or above.

Webpack plugin dependencies and configuration files will need to be adjusted as the version changes. After that, add VueLoaderPlugin to the plugin. Then adjust the substitution of some environment variables for Vue3:

Use the conversion tool to run through

Take a look at the iView project structure:

SRC directory is the source code of the component library, examples is the sample repository when debugging the development of the component library, both Vue2 code.

Let’s run through each of them using GoGoCode’s Vue conversion plugin:

gogocode -t gogocode-plugin-vue -s ./examples -o ./examples

gogocode -t gogocode-plugin-vue -s ./src -o ./src

The results are spectacular, with 140 Diff in the SRC directory alone

You can see that many of the differences between Vue2 and Vue3 have been converted

Such as the slot:

The.native suffix for events has been removed:

($on, $children, etc.);

The life cycle is also automatically renamed:

Functional components are modified “out of all recognition” :

The life cycle of the directive has also been changed:

…

We were delighted to see how much the tool had changed for us, and then we ran to see it!

Sure enough, he couldn’t run.

Make adjustments manually

Such a large component library, there must be tools can not cover the place, our requirements for it is only to help us do 90% of the repetitive work, the rest of the technical work or people to adjust!

For example, component-injected entry files:

For example, an isServer that doesn’t seem to be available at the moment:

If you can’t access this in the props default function, you need to hack it.

…

Any bugs found in the conversion rules have been randomly fixed. After rerunning, it turns out that the number of manual changes is very small, maybe 10 compared to nearly 200 files, and there is very little duplication of work.

Then let’s try NPM run dev

It ran:

A few things were fixed, and the old project was upgraded to use directly!

Afterword.

Thanks to GoGoCode for LaLaLine, our LaLaLine project management tool can be packed with Vue3

Of course, this practice is mainly for testing, improving GoGoCode capabilities and upgrading internal projects. In the future, WE still hope to use the official Vue3 version of iView. But when can we use the official Vue3 component library?

When we went to look at the iView issue list, we found that many friends also expressed their ardent expectations, iView team has a corresponding plan: (Feature Request) Missing vue3.0 support Vue3.0 has been released, does View-Design have any plans to support Vue3? When will VUE3 be supported?

When I first came up with the idea of upgrading the component library myself, I couldn’t help but cringe at the thought that it would be a huge hole, but it turned out that it wasn’t that hard after most of the rework was done by the tools! This experiment proves that GoGoCode can accelerate the process of upgrading Vue3 of large Vue applications/component libraries. If there is anything that GoGoCode can help, please contact us as soon as possible!

Issues: github.com/thx/gogocod…

Nail group: 34266233

Finally: ask star support!

Github:github.com/thx/gogocod… (The iView project for this demo is also in there.)

Liverpoolfc.tv: gogocode. IO