vue2升级到vue3

将项目从 vue2、element-ui 升级到 vue3、element-plus 从技术上具备可行性，但涉及：

1. 升级到vue3和element-plus，修改大量代码为新版本语法

2. 升级相关依赖，如果没有兼容新版本，则需要替换依赖或执行开发

3. 适配样式规范

4. 开发自测微服务所有功能

5. 测试回归所有功能

总体而言，工作量很大。

存在的问题

1. 拓扑图多选框用到vue-dompurify-html，拖选时无法渲染框框感觉是vue-dompurify-html无法同步更新传入属性内容，还是为最初值

2. 拓扑图配置属性中的名称高度输入框设置后无法真正修改高度，高度其实是根据内容自动调整的，建议改为不可用

操作步骤

升级 vue3

升级 element-plus

vue-cli 5 切换 vite4

echarts 升级 v5

其它依赖升级

步骤详情：

格式化代码

命令行 - ESLint - 插件化的 JavaScript 代码检查工具

npx eslint --ext js,.vue --fix .

npx prettier --write .

全目录替换 tab() 为 4个空格

npx prettier --write .

格式化完成后，充分自测项目并单独提交一次代码，commit 信息中注明代码格式化。

可能遇到的问题：

旧代码不符合 eslint 规范，代码无法提交。需要一一修复 error 问题。

或临时关闭提交前 eslint 检查：删除 package.json 文件中部分内容。（此处修改不提交）

vue2 升级 vue3

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

安装依赖（只需按照一次）：

npm install gogocode-cli -g

找到 gogocode 安装目录，通常位于 nodejs 全局目录的 node_modules 文件夹下：

替换 gogocode-plugin-vue 中的 src/api.js 文件：

api.js

替换 gogocode-plugin-vue 中的 src/package-json.js 文件：

package-json.js

转换 vue2 源文件到 vue3，转换后格式化：（建议先根据升级报错处理，处理一下，防止报错）

gogocode -s ./src -t gogocode-plugin-vue -o ./src -p exclude-rules=transition 

npx prettier --write .

排除 transition 规则，避免导致scss中注释的格式化问题 

使用 gogocode-plugin-vue 转换代码，css样式错乱 · Issue #209 · thx/gogocode · GitHub

Transition 作为根节点 | Vue 3 迁移指南 (vuejs.org)

升级报错处理

原因：node版本太低，升级到16.18.0

main.js 转换报错处理

修改文件：

gogocode -s ./src/main.js -t gogocode-plugin-vue -o ./src/main.js

格式化成功后，手动修改：

升级时，main.js改动太大。资产main.js中的改动如下，仅供参考

import './util/initGlobal';
import * as Vue from 'vue';
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import ElementPlus from 'element-plus';
import i18n from './util/i18n.js';
import VueBus from './util/vueBus.js';
import VueDOMPurifyHTML from 'vue-dompurify-html';
import '@uedm/common/util/randomValue.js';

import echartsXSSPolyfill from './util/echartsXSSPolyfill.js';
echartsXSSPolyfill();

import * as ElementPlusIconsVue from '@element-plus/icons-vue';

import './assets/iconfont/style.css';
import './assets/css/common.scss';
import './assets/css/base.scss';
import './assets/css/dark-theme.scss';
import store from './store';
import './directives';
import './assets/plx-icons/style.css';

if (parent && parent.ZteFrameWork) {
    parent.ZteFrameWork.addResponsiveHandler(() => {
        app.config.globalProperties.$bus.emit('windowResize');
    });
}
import clickoutside from './directives/clickoutside.js';

const app = createApp(App);
window.i18n = i18n;

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component);
}
app.config.globalProperties.routerAppend = (path, pathToAppend) => {
    return path + (path.endsWith('/') ? '' : '/') + pathToAppend;
};
app.directive('clickoutside', clickoutside);
app.use(VueDOMPurifyHTML, {
    default: {
        ADD_ATTR: ['target'],
    },
});
app.use(i18n);
app.use(ElementPlus);
app.use(VueBus);
app.use(store);
app.use(router);
app.mount('#app');

升级 Element plus

icon预处理问题

1. 找到gogocode的源码，用vscode打开后，找到icon.js

下面的文件替换icon.js内的代码

icon.js

针对<i ref="toggleButton" :class="['el-icon-caret-left', { 'is-active': show }]"></i>的el-icon在：class里面的定义，需要手动找到修改

jsx中的el-icon-，考虑通过增加类名及图片替换，不用plus-icon的写法。增

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

npx prettier --write .

全局替换 element-ui 为 el