本片文章建立在已正确安装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文件夹中找到
这篇文章对你有帮助就点个赞吧~~~