首页 前端知识 如何升级vue版本?从vue2升级到vue3解决方法

如何升级vue版本?从vue2升级到vue3解决方法

2024-01-31 12:01:11 前端知识 前端哥 607 796 我要收藏

本片文章建立在已正确安装vue2的基础上,请确认后再进行升级!!!

0基础安装请自行百度

推荐:Vue安装环境最全教程,傻瓜式安装_安装最新版vue_浪漫主义码农的博客-CSDN博客

一:卸载原来的版本

先打开命令行窗口(这里尽量使用管理员打开方便后续操作),输入vue -V先查看当前自己的版本

vue -V

然后执行命令删除当前vue版本

npm uninstall vue-cli -g

再次执行vue -V,会提示不是内部或外部命令,也不是可运行的程序或批处理文件,这个时候证明已经删除成功

二:安装新版本vue

首先你要保证你的node.js的版本支持vue cli3,最低 node 版本是 node.js 10

可以通过指令查看当前node版本

node -v #查看node版本
npm config list #推荐使用这个,可以看见更多配置信息

版本没问题后,运行命令

npm install -g @vue/cli

等他下载完成后,再次输入vue -V查看版本

到了这一步,说明已经安装成功,vue2已经变成vue3

三:创建vue3工程

先在D盘新建一个文件夹vue_projects用来存放vue工程

创建工程有两种方法

vue create demo #通过命令创建
vue ui #通过GUI,也就是图形化创建

相信大家都已经想尝试使用图形化进行创建,我们先以图形化举例来创建工程

1.使用vue ui创建工程

在该路径下用管理员权限打开命令行输入vue ui

这个时候会自动跳转到游览器,如果没有就自己输入,然后就会看到这个页面

然后点击创建,注意看看目录是不是自己刚才创建的vue_projects,然后点击在此创建新项目,填入一些基本信息,包管理器选择npm,Git可开可不开

点击下一步,选择vue3,最后创建项目

这个时候就需要等待一段时间,其实他创建工程还是通过我们刚才打开的命令窗口来进行下载,这就是为什么需要打开管理员权限,不然会报错

这个时候也差不多下载完了,项目就创建成功了,图形化可以更方便的管理项目

2.使用命令行创建工程

还是打开vue_projects路径下命令行输入vue create demo2创建一个名为demo2的工程

vue create demo2

回车后让你选择创建什么工程,我们选择vue3,再直接回车

然后就会开始下载相关文件

下载完成后会显示下面这张图,说明下载成功了

按照蓝色字体提示,依次输入cd demo2和npm run serve

按照提示,在游览器输入localhost:8080/,出现页面说明工程创建成功

四:总结

两种方法创建的工程都一样,大家根据自己情况进行使用

创建的工程,可以在vue_projects文件夹中找到

这篇文章对你有帮助就点个赞吧~~~

转载请注明出处或者链接地址:https://www.qianduange.cn//article/922.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!