记录将vue2+JS工作流项目改造成vue3+TS

一、项目描述

我们公司的一个工作流项目，采用的技术为 vue2全家桶 + elementUI + vuedraggable + jsPlumb。现需要将该项目改造成 vue3 + TS 并集成到公司的流程中心项目。在这改造集成过程中对遇到的问题做个记录。

二、项目搭建

第一步、将vue-cli升级到4.5.0以上版本。
npm install -g @vue/cli

第二步、搭建项目
vue create projectname
搭建中一些安装配置按个人喜好来选择。也可以直接通过脚手架搭建TS

第三步、安装依赖
在vue3中有些依赖包的安装方式、引用方式与vue2的不同。

安装 elementUI

在vue2中安装引用
npm install element-ui --save
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

在vue3中安装引用
npm install element-plus
import ElementUI from 'element-plus'
import 'element-plus/dist/index.css'
const vueApp = createApp(App)
vueApp.use(ElementUI)

安装 vuedraggable

在vue2中安装引用
npm install vuedraggable --save
在需要用到拖拽的页面导入组件并注册
import draggable from 'vuedraggable' --save
components: {
        draggable
}

在vue3中安装引用
npm install vuedraggable@next --save
引用方式可以和vue2中引用方式一样，
也可以在setup中直接引用。如：

安装 jsPlumb
由于项目中jsPlumb依赖是用的本地文件引用。所以就不做介绍。不过 npm 安装方式与 vuedraggable 一样，
需要加 @next 后缀

依赖配置都OK之后，剩下的就是该语法了。毕竟 vue2 + JS 的语法与 vue3 + TS 的语法区别太大了。