2025年vue2项目升级为vue3项目（vue项目升级cli3）

科技前沿 • 2025-04-24 18:28 • 阅读 36

大家好，我是讯享网，很高兴认识大家。

使用命令：vue create projectName，按照提示进行创建。

1）将原项目中的package.json下的dependencies节点的内容删掉vue、element-ui、vuex的节点，追加到新项目的package.json中，然后安装element-plus、pinia

npm install element-plus pinia

或

yarn add element-plus pinia

2）继续安装剩余依赖，执行npm install或yarn install

1）将原项目src目录的代码拷贝到新项目中，不要直接复制main.js。

2）修改main.js，根据自己代码的具体情况进行修改，此处为示例。

3）修改vue.config.js，根据自己代码的具体情况进行修改，此处为示例。

讯享网

项目运行起来后，应该有一些报错，然后就逐个解决报错，这里列举一些，我在项目中遇到的，提供参考。因为vue3中也支持vue2的选项式的写法，所以大部分代码不需要做调整，只是element的组件部分需要根据最新的组件用法使用，需要调整的也不多。

原项目中的状态管理的部分store需要修改，使用vue3匹配的pinia进行状态管理，以下是用户相关的状态信息的示例代码。

代码中使用了this.$store的修改方法如下：

讯享网

1）使用useRoute来获取当前路由的信息，然后通过path属性获取完整的路径

讯享网

2）监听路由

1、组件中v-on="$listeners"移除，只需要保留v-bind="$attrs"

2、el-button组件，type="text"需要修改为 link，例如：

讯享网

3、分页组件中的current-page.sync，修改为 v-model:current-page。

4、vue3没有全局过滤器，使用计算属性或者全局方法替代。

5、table组件，列的template中slot-scope删掉，换成#default。

6、通过ref获取子组件中的数据或方法，就在子组件中通过defineExpose将需要用到的数据或方法暴露出去，然后在父组件中使用ref去调用时就不会报错了。

Vue 3 迁移指南 | Vue 3 迁移指南

入门 | Vue Router

定义一个 Store | Pinia 中文文档