完整从零开始搭建一个Vue3.0项目
之前做的项目是在已经搭建好的项目上直接进行开发,这两天不是很忙,就打算自己过一遍搭建流程。现在把自己的搭建过程分享出来给有同样困扰的同学。1、安装Vue 3.0
之前做的项目是在已经搭建好的项目上直接进行开发,这两天不是很忙,就打算自己过一遍搭建流程。现在把自己的搭建过程分享出来给有同样困扰的同学。
1、安装Vue 3.0
在这之前需要安装Node.js和npm,这部分网上有很多资料。
有了环境之后,我们新建一个项目文件夹,路径中最好不要有中文。我们在文件夹中按住Shift然后鼠标右键,选择打开Powershell或者cmd。
之后可以输入命令安装vue了,在这里有两种安装方式,全局安装和局部安装。全局安装的话以后再次搭建新项目的时候就不需要再安装vue了。
1.1、全局安装(推荐)
在上一步打开的Powershell或者cmd中输入npm install -g @vue/cli,这里面的g是global,也就是全局安装的意思。接着等待就行了。
安装好后可以通过输入vue -V查看是否安装成功。
1.2、局部安装
把-g改为-i就可以。
2、直接使用vue-ui搭建项目
使用vue-ui可以省很多事,我是认为搭建工具就是个工具,没必要花很大的精力去做繁琐的配置工作。使用vue-ui快速便捷,去掉了很多操作,省了时间,何乐不为。
直接在刚才的Powershell或者cmd中输入vue ui
2.1、搭建项目
直接点击页面左下方的更多,打开vue项目管理器
然后点击这个创建,选择你要建的文件夹,然后点击下面的在此创建新项目
输入你的项目名,下一步。在包管理器这里可以选择npm或者yarn,我选择了yarn
新手直接默认配置就可以了
然后点一下创建,等圈圈转完,这个项目就搭建好了,是不是很简单了。
3、运行项目
重新在你的项目文件夹中打开Powershell或者cmd,直接输入yarn serve或者npm run serve就可以运行了。然后在你浏览器输入这个local地址就可以打开了demo了。
更多推荐
所有评论(0)