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. 根据报错提示修复代码

相关推荐
ElasticPDF-新国产PDF编辑器13 分钟前
Angular use pdf.js and Elasticpdf tutorial
javascript·pdf·angular.js
揣晓丹18 分钟前
JAVA实战开源项目:校园失物招领系统(Vue+SpringBoot) 附源码
java·开发语言·vue.js·spring boot·开源
吃没吃21 分钟前
vue2.6-源码学习-Vue 核心入口文件分析
前端
Carlos_sam21 分钟前
Openlayers:海量图形渲染之图片渲染
前端·javascript
XH27623 分钟前
Android Retrofit用法详解
前端
鸭梨大大大24 分钟前
Spring Web MVC入门
前端·spring·mvc
你的人类朋友24 分钟前
MQTT协议是用来做什么的?此协议常用的概念有哪些?
javascript·后端·node.js
吃没吃26 分钟前
vue2.6-源码学习-Vue 初始化流程分析 (src/core/instance/init.js)
前端
XH27628 分钟前
Android Room用法详解
前端
顽疲35 分钟前
从零用java实现 小红书 springboot vue uniapp (11)集成AI聊天机器人
java·vue.js·spring boot·ai