【前端vue升级】vue2+js+elementUI升级为vue3+ts+elementUI plus

Vue 2 项目升级到 Vue 3 的大致步骤如下：

1. 安装 Vue CLI 升级插件：

npm install -g @vue/cli
vue add vue-next

2. 升级项目依赖：

npm install vue@next

3. 修改项目文件以兼容 Vue 3。

   • 移除 functional: false，因为 Vue 3 不再需要这个选项。
   • 使用 Composition API 重构代码。
   • 修改 data 函数为 reactive 或 ref。
   • 使用 setup 函数替代 created 和 methods。
   • 修改生命周期钩子，如 beforeDestroy 更改为 beforeUnmount。
   • 检查其他非兼容性更改并进行相应修正。

4. 迁移 Element UI 到 Element Plus。

   • 安装 Element Plus：

   
   
   
   npm install element-plus --save

   • 修改组件，使用 Element Plus 组件。
5. 更新单元测试和端到端测试。
6. 更新项目配置文件（例如：vue.config.js）。
7. 运行测试和构建项目来验证升级是否成功。

以下是一个简单的 Vue 3 组件示例，使用 TypeScript 和 Element Plus：

<template>
  <el-button @click="increment">Count: {{ count }}</el-button>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { ElButton } from 'element-plus';
 
export default defineComponent({
  name: 'MyComponent',
  components: {
    ElButton,
  },
  setup() {
    const count = ref(0);
 
    function increment() {
      count.value++;
    }
 
    return {
      count,
      increment,
    };
  },
});
</script>

注意：Element UI 不是直接升级到 Element Plus 的。你需要逐步迁移你的组件和样式。