The last piece of the puzzle to upgrade Vue3
Tags: javascript, vue
Published: 2022-02-27 18:57:24


## The last piece of the puzzle to upgrade Vue3

This is the front-end team at Alimama. Before, we released a Vue conversion plug-in based on the code conversion tool [GoGoCode](https://github.com/thx/gogocode) , it can help you upgrade the Vue2 code in the project to Vue3, but we also received feedback from many friends: I used Based on Vue2's ElementUI, it doesn't support Vue3 yet. I can't run my business code after upgrading it.

Now ElementUI's Vue3 version Element Plus [has been officially released](https://juejin.cn/post/7061850934095609863), it is mostly compatible with ElementUI's API, but there are also some [breaking changes](https://github.com/element-plus/element-plus/discussions/5658), with the cooperation of the two teams, we bring you [gogocode-element-plugin](https://github.com/thx/gogocode/tree/main/packages/gogocode-plugin-element), which can automatically modify your project code to adapt to all breaking changes, greatly reducing your upgrade workload.

The last piece of the puzzle is complete!

## The upgrade of a large project

In order to ensure that our conversion rules can adapt to complex scenarios, we have selected the popular Vue2 + ElementUI project in the community [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin), which covers With most of the usage of Vue2 and Element, let's try to convert it to Vue3 + Element Plus through the conversion plugin!

### Version control and use a new branch

In order to facilitate comparison, our next command will make the conversion tool overwrite your original code. It is recommended that you switch to a new branch operation. **If your code is not hosted by git, please do not output it in the same directory. **

```bash
git checkout -b to-vue3
```

### Install gogocode-cli

```bash
npm install gogocode-cli -g
```

### Format source code for easy comparison of code changes

Because the format of the code may change after the tool's AST is modified, it is recommended to format all the source code with prettier in advance, and then compare it with the converted one at a glance.

```bash
gogocode -s ./src -t gogocode-plugin-prettier -o ./src
```

Enter y and press Enter when prompted whether to overwrite the source code

![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/346a43979b714afe80297183e96c876d~tplv-k3u1fbpfcp-watermark.image?)

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


![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bd3c022a113f4bf7844d5b37f6cd1e31~tplv-k3u1fbpfcp-watermark.image?)

Commit this change to git


### Use tools to convert code from Vue2 to Vue3

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

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

There are 258 files in this project, and the conversion program is working hard:

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6b7627042edd4141ae9aa4c56f497336~tplv-k3u1fbpfcp-watermark.image?)


Conversion is complete! There are 151 files that have been changed, which would be impossible to rewrite by hand!

![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1edd92d9e22e4c0dbc5b6e3348cab8e7~tplv-k3u1fbpfcp-watermark.image?)

It can be found that some lifecycles have been transformed:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xbucd95stfy3fhw2lo10.png) 

The slot and filter syntax is no problem:

![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1965c2d62f684f98b13e59f6b6088fa0~tplv-k3u1fbpfcp-watermark.image?)

Functional components have been changed beyond recognition:

![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/29c2bc18dd2e4b1bbf4af632fc6c09de~tplv-k3u1fbpfcp-watermark.image?)

Read through the files one by one, commit if there are no major problems and go to the next step!

Some places that may need to be modified manually can refer to this: [Places to pay attention to](https://gogocode.io/zh/docs/vue/vue2-to-vue3#%E9%9C%80%E8%A6%81 %E5%85%B3%E6%B3%A8%E7%9A%84%E5%9C%B0%E6%96%B9), but it is recommended that you pay attention to these details when you can finally run it.


### Use tools to convert code from ElementUI to Element Plus

We use the [gogocode-element-plugin](https://github.com/element-plus/element-plus/discussions/5657) plugin to upgrade the project code from ElementUI to Element Plus:

```bash
gogocode -s ./src -t gogocode-plugin-element -o ./src
```

Here is the official summary: [Element Plus incompatible changes](https://github.com/element-plus/element-plus/discussions/5657), [gogocode-element-plugin](https://github.com /element-plus/element-plus/discussions/5657) plugin covers almost all rules.


#### The plugin automatically does the conversion for you

- icon is converted from class mode to component mode, and components are also imported automatically

![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/97f76ca3f6324b5199c8d96ab8f3febf~tplv-k3u1fbpfcp-watermark.image?)


![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hionjjy70cgg3c42cvbz.png) 

- Component auto-rename

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3946a0e47ffb4b5dba5219c8053fce14~tplv-k3u1fbpfcp-watermark.image?)

- Parameters are automatically renamed

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/209961af2faa4d74ba6111ec8bc2c7b2~tplv-k3u1fbpfcp-watermark.image?)

- Attributes are renamed automatically

![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b05a2159d8c24dc58de032fb5a9c265b~tplv-k3u1fbpfcp-watermark.image?)

- Import automatically changed from element-ui to element-plus

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2v3946ima90tet84quy.png)
 

#### Manual modification part

These only need to be done manually with one-time, single-file changes~

##### package.json

`element-ui` replaced by `element-plus`

If you use icons, don't forget to install `@element-plus/icons` too

##### css import

```js
import 'element-plus/theme-chalk/index.css'
```

### Upgrading dependencies and building

Everyone's build environment is different. You can update the version numbers of vue and vue-cli in package.json with the following commands:

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e3kt3vngo171qylrldm7.png)
 
I have encountered some problems with upgrading from Webpack4 to Webpack5, please refer to the [vue-cli upgrade document](https://cli.vuejs.org/migrations/migrate-from-v4.html#e2e-nightwatch-plugin) also All resolved.


### Run it and try, and further modify it according to the error

Run the project to see which errors are reported and fix them one by one. Some are brought by third-party components, and some are brought by construction. For a project of this size, I probably modified more than 100 lines: [commit](https ://github.com/gogocodeio/vue-element-admin/commit/2f17bf01d2f020e0f1b9f0929cfb7acdc05fe97f)

Then I saw the picture I was expecting:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y7m9y5pjup4gcifpc24r.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9hqspk9patz00y7gf6r6.png)
  


## Hope to get your feedback

I hope [GoGoCode](https://github.com/thx/gogocode) and the supporting code conversion tools can help you do less cookie-cutter work and go home early. If you encounter any problems in use, please pass Contact us in the following ways:

issues: [github.com/thx/gogocod…](https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fthx%2Fgogocode%2Fissues "https://github.com/thx /gogocode/issues")

DingTalk Group: 34266233

Finally: ask for star support!

Github: [github.com/thx/gogocod…](https://github.com/thx/gogocode) (This project is in the packages/gogocode-plugin-element/ directory)

Official website: [gogocode.io](https://gogocode.io)