之前做的项目是在已经搭建好的项目上直接进行开发,这两天不是很忙,就打算自己过一遍搭建流程。现在把自己的搭建过程分享出来给有同样困扰的同学。

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了。

Logo

前往低代码交流专区

更多推荐