完整从零开始搭建一个Vue3.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了。