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



使用命令：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的组件部分需要根据最新的组件用法使用，需要调整的也不多。

4.1、修改状态管理store

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

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

4.2、修改路由相关

4.3、路由信息报错的情况

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

2）监听路由

4.4、其他报错

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 中文文档

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/12031.html