vue2项目迁移vue3与gogocode的使用

#背景

公司有个项目使用vue2+js+webpack框架开发的,由于该项目内部需要安扫,导致很多框架出现了漏洞需要升级,其中主要需要从vue2升vue3,但是重新搭框架推翻重做成本太高,于是找到了gogocode。

#升级步骤踩坑

  1. 安装 gogocode插件
bash 复制代码
pnpm install gogocode-cli -g
  1. 使用迁移工具将代码从vue2转换到vue3

gogocode/packages/gogocode-plugin-vue at main · thx/gogocode · GitHub

bash 复制代码
gogocode -s ./src -t gogocode-plugin-vue -o ./src

./src为代码所在文件夹

  1. 升级 Element 的引用代码
bash 复制代码
gogocode -s ./src -t gogocode-plugin-element -o ./src
  1. 安装element-plus
bash 复制代码
pnpm install element-plus
  1. 手动修改main.js 里引用
javascript 复制代码
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

window.$vueApp = Vue.createApp(App) // 放在 import下第一行

```
其他文件注册引用
...

```

window.$vueApp.mount("#app"); //放在最后一行
  1. 依赖升级
bash 复制代码
gogocode -s package.json -t gogocode-plugin-vue -o package.json
  1. 参照v-cli文档 迁移webpack相关配置

Migrate from v4 | Vue CLI

  1. 升级eslint相关依赖版本及配置至支持vue3

https://eslint.vuejs.org/user-guide/

https://eslint.nodejs.cn/docs/latest/

  1. 修复代码里的其他报错

a. 如在项目中引入了echarts依赖,在初始化时应使用markRaw

javascript 复制代码
import { markRaw } from "vue";
var myChart = markRaw(echarts.init(DOM));

b. Util中的公用方法用export导出在main中引用

javascript 复制代码
import { functionA } from '@/utils'
window.$vueApp.config.globalProperties.functionA = functionA

c. 替换不兼容组件

d. 根据报错提示修复代码

相关推荐
好_快5 分钟前
Lodash源码阅读-baseUniq
前端·javascript·源码阅读
不秃的开发媛6 分钟前
前端技术Ajax入门
java·开发语言·前端
牧羊狼的狼11 分钟前
React.memo 和 useMemo
前端·javascript·react.js
xixixin_19 分钟前
【uniapp】vue2 搜索文字高亮显示
java·服务器·前端·uni-app·交互·文字高亮
还是鼠鼠22 分钟前
Android移动应用开发入门示例:Activity跳转界面
android·前端·gitee·android studio·android-studio
不知疲倦的仄仄27 分钟前
跨域 同源策略通俗讲解
前端·后端·spring·edge浏览器
珹洺32 分钟前
Jsp技术入门指南【十】IDEA 开发环境下实现 MySQL 数据在 JSP 页面的可视化展示,实现前后端交互
java·运维·前端·mysql·intellij-idea·jsp
excel36 分钟前
webpack 运行时模版 第 六 节 /lib/RuntimeTemplate.js
前端
excel37 分钟前
webpack JS meta 信息插件 /lib/JavascriptMetaInfoPlugin.js
前端
前端极客探险家38 分钟前
前端 Excel 工具组件实战:导入 → 可编辑表格 → 导出 + 样式同步 + 单元格合并
前端·typescript·vue·excel