Upgrade the Vue2 project to Vue3 using GoGoCode

background

In the latest session of “Front-end Early Chat – Conference live”, Ye Xi from Ali mom shared a session about “how to upgrade Vue2 with one key Vue3 – GoGoCode”, and then came into contact with GoGoCode. When watching the live broadcast, she felt very cool, so she couldn’t wait to start using it

The attempted conversion project was built earlier based on VUe-CLI 2.x, and the directory structure is as follows:

. ├ ─ ─ build ├ ─ ─ the config ├ ─ ─ logs ├ ─ ─ node_modules ├ ─ ─ the SRC ├ ─ ─ CHANGELOG. Md ├ ─ ─ the DEPLOY. The md ├ ─ ─ the README. Md ├ ─ ─ ├─ ├─ ├─ patch-lock. Json ├─ Patch-Lock. Json ├─ patch-LockCopy the code

Upgrade with GoGoCode

Vue2 to Vue3 Upgrade Guide – GoGoCode official documentation

1. Install tools

npm install gogocode-cli -g
Copy the code

2. Migrate source files

Note: -s is the directory/file name of the original file, -o is the output directory/file name, if the two are the same, the conversion plug-in will overwrite your code, please make a backup before doing this. Migrate source files – GoGoCode official documentation

Change the name of the original directory before the migration (backup the original directory, after the migration, based on Git Diff to facilitate the view of file changes)

It is recommended that the original file directory (e.gsrcDirectory), change to band-oldThe suffix (src-old);
in.gitignoreignoringsrc-oldDirectory;
Then start migrating the source files

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

3. Rely on upgrades

gogocode -s package.json -t gogocode-plugin-vue -o package.json
npm install
Copy the code

With the above three steps done, GoGoCode helped us convert the Vue2 code into Vue3 code and upgrade the Vue bucket dependencies.

At this point, you can try to run the project, and you’ll probably get a bunch of errors, so don’t worry about moving on.

4. Upgrade the third-party component library

Element Plus
Ant-Design-Vue
Vant
.

If you are using a third-party UI component library, you need to manually upgrade to a version of the library that supports Vue3.

5. Others rely on upgrades

@vue/babel-plugin-jsx
eslint-plugin-vue
@vue/test-utils
.

Reference: Other projects – Vue official documentation

Check for destructive changes

Both Vue buckets and third-party UI component libraries have varying degrees of disruption:

Vue2 to Vue3 Upgrade Guide – GoGoCode official documentation
Migrate from Vue2 – Vue official documentation
Migrate from 3.x to 4.0 – Vuex official documentation
Migrating from Vue2 – Official document of Vue Router
Breaking Change List – Element Plus

Using the Gogocode-plugin-vue plugin based on GoGoCode has automatically converted most of the VUE code, and there may be a few cases where the VUE code conversion is not covered.

And third party UI component library of destructive changes (such as the component name change, property changes, etc.), we need to check the corresponding documentation and update log, manual synchronize changes, rerun the program testing, according to the error information to search, access, cycling, until there is no error, everything is ok.

Or if you’re interested and have the time, you can develop a GoGoCode plugin for future generations.

Tips: Set the terminal to display a larger number of lines at the same time, easy to view all error messages in the console

iTerm2 – Proferences – Profiles(You are advised to create and switch to a custom configuration) –Terminal– Scrollback Buffer – SelectedUnlimited scrollback
VSCode– setterminal.integrated.scrollback– is equal to a large number (e.g9999999)

Problems encountered

Vue single-file component template pug syntax, the root node must be written top
[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.
```
-.el-table /deep/ .warning-row {
+.el-table:deep(.warning-row) {
Copy the code
```
VueCompilerError: expects exactly one child component. Vue2 only checks if there are only children at runtime, Vue3 checks at compile time, using v-if and V-else -if to ensure that there is only one child

Reference: forum.vuejs.org/t/vue-3-tra…
VueCompilerError: v-model value must be a valid JavaScript member expression

The value of v-model cannot contain Chinese and cannot be used for defensive programming judgment (eg: V-model =’ oitem.stock_type && oitem.stock_type. Key ‘)
```
- v-model='oItem.stock_type && oItem.stock_type.key'
+ v-if='oItem.stock_type && oItem.stock_type.key'
+ v-model='oItem.stock_type.key'
Copy the code
```
Uncaught Error: Catch all routes (“*”) must now be defined using a param with a custom regexp.

Reference: * (star or wildcard) routing – Vue Router removed
Uncaught TypeError: Cannot read properties of undefined (reading ‘config’)
1. useapp.config.globalPropertiesreplaceVue.prototype
2. If you can’t get it directlyappTo defineinstallMethod from the parametersapp, and then complete the mount
Uncaught TypeError: Cannot set properties of undefined (setting ‘$Lazyload’)

Vue3 is not supported by vue-lazyLoad and the exposed install mount method (vue.prototype. lazyload = lazyload = lazyload) needs to be updated
Feature flags VUE_OPTIONS_API, VUE_PROD_DEVTOOLS are not explicitly defined. github.com/vuejs/vue-n…
.

conclusion

It has been more than a year since the official Vue 3.0 version was released. Every time I push Vue3 related articles, I feel that I am urged to use Vue3 as soon as possible. If I do not use Vue3 again, I will be outdated.

However, when I had an idea to learn Vue3, SOMETIMES I didn’t know where to start and the learning efficiency was not high (study for five minutes and rest for two hours…). “, read the official documentation and examples directly, copy the examples on the documentation, but soon forget them and have to start all over again.

In the final analysis, it is only the input, but the output is too little and the impression is not deep enough. Therefore, I have this article. I insist on output and consolidate my knowledge.

Grab economic development, I operate like a tiger

Key team battle, I submissive, a look at the record 0-5!

Skr Skr

Why don’t you like 👍 before you go?