最后一块拼图拼上之后…
之前我们发布了基于代码转换工具 GoGoCode 的 Element to Element Plus 转换插件（升级 Vue3 的最后一块拼图，快试试这个工具自动升级你的 Element 老项目），配合先前发布的 Vue 转换插件，它能够帮你把项目里的 Element+Vue2 的项目自动升级成 ElementPlus+Vue3 的，我曾激动地写下：最后一块拼图已经拼上！
文章里我们用社区上深受大家欢迎的 vue-element-admin 为例子介绍了我们工具的使用方法，本来只是想举个栗子，但我们还是低估了这个项目的热门程度，很多人加上了钉钉群（34266233）求助：我的项目就是从这个项目起步魔改的，我就是需要那个项目的 Vue3 升级方案。
好的拼图总是拼了又拼，既然如此，我们就把那个例子完善一下，在工具的帮助下结合一些手动的修改，搞出来一个 vue-element-admin 的 Vue3 版本，有需要的朋友可以考虑直接使用，这个项目完全由 Vue3+ElementPlus 驱动，功能和原来保持一致，你可以尽情使用新的特性！
先上图：
对已有项目想要升级的朋友，我也下面把整个过程的记录下来，可以作为参考。
动手！
使用 GoGoCode 的自动升级部分我们在前文中已经写得很清楚了，在这里不再赘述
手动修改部分
升级运行时依赖
这里主要是把 Vue2 及配套升级到 Vue3 及配套，还有 element-ui 升级到 element-plus
升级构建依赖
我们主要是吧 @vue/cli-service 从 4 升级到 5，对应的 webpack 也从 3 升级到了 5，以至于后面我们要修改一些构建流程。
升级构建流程
修改 vue.config.js，升级配置以适配 Webpack5
移除支持性差的插件，这里面的插件有些已经不兼容 Webpack5，有些已经被内置。
css 引入变更
src/styles/element-variables.scss
入口文件变更
首先需要保证 window.$vueApp = Vue.createApp(App) 在最前面，然后把一些导入即运行还要依赖 Vue 实例的文件改成函数，将 app 传入。
路由变更
最新版的 vue-router 不再支持前面无 / 和 * 的做法，我们把他们改掉：
addRoutes 方法已被移除，我们用其它方式替代:
修复 icon 的问题
原有 icon 是使用 iconfont 的形式，因此支持字符串动态引入，为了兼容字符串引入，做了一个 map索引到所有组件：
router 和 transition 共用的调整
在 Vue3 中，二者共用时应该让 <router-view> 套在 <transition> 的外面
取消原来的黑魔法引入 css 变量
原来作者用了一个黑魔法从 scss 文件中引入 css 变量到 js 中，在 Webpack5 中工作得不是很好，所以这里直接简单粗暴地贴到 js 里面。
修复一些组件升级导致的样式对齐问题
以上代码均可在 commits 中看到：github.com/gogocodeio/…
欢迎大家尝鲜，反馈问题~
升级有问题，欢迎大家来群里寻求帮助！
希望 GoGoCode 和配套的代码转换工具能帮助大家少做一些千篇一律的工作，早点下班回家，如果你在使用中遇到什么问题，欢迎通过以下方式联系我们：
issues: github.com/thx/gogocod…
钉钉群：34266233 群里有很多热心的小伙伴~
最后：求 star 支持！
Github：github.com/thx/gogocod…
官网：gogocode.io