vue搭建脚手架（从0搭建Vue脚手架项目）

这几天利用业余时间做了一个个人项目，后端部分已经搭建好了还差一个前端，经过考虑前端利用Vue来搭建开发，因对Vue不是很熟悉，所以利用网络查找了相关的资料，成功的跑出了第一个Vue页面，写在此作为一个记录。

官网简介：Node.js 是一个基于 Chrome V8引擎的 JavaScript运行环境，它使用了一个事件驱动、非阻塞式 I/O的模型,因此其轻量又高效。换句话说，想要运行Vue脚手架就需要Node.js。

下载网址：http://nodejs.cn/download/

选择对应的系统安装包下载并安装，安装过程一路点击下一步就行。

下载安装完成后，打开命令窗口，依次输入node -v 和npm -v ，下方出现对应版本号就表示安装成功。

在命令行中输入npm install vue 等待完成即可

在命令行中输入 npm install --global vue-cli等待完成即可

上述步骤都做完之后，就可以进行Vue项目的构建了。

首先，在命令窗口打开你要安装的地址，在这里我选择在桌面构建项目。

接着，输入vue init webpack first-pro，按回车键

接下来，会让你填写一些项目相关的描述。

第一个就是问你项目的名称，你可以修改也可以直接按enter键使用默认名，这里我直接按下enter

第二个问题是让你输入项目的简介，这里可以填也可以不填，我直接选择enter

第三个问题是让你输入作者，这里你可以写上你的名称和邮箱地址

第四个问题是问你构建模式，在此选择第一个按enter

第五个问你是否安装路由，输入Y确认安装

第六个问题是是否使用规范化代码，在此输入n后回车

第七个问题是是否单元测试，这里输入n后回车

第八个问题是选择哪种构建方式，这里我们选择NPM构建方式，然后回车

项目相关信息填写完之后，vue脚手架就会自动构建项目，此时我们等待一会即可。

项目构建完成之后，桌面上多了一个first-pro文件夹，此时就说明项目构建成功了！

在上面步骤完成之后，在命令窗口进入first-pro文件夹，输入命令npm run dev之后回车。

看到这个界面之后，就代表启动成功了，此时浏览器中输入红线所指网址

当看到上面这个界面的时候，一个完整的Vue项目就已经构建成功并可以运行了！

通过上面的步骤我们就成功创建了一个Vue项目了，感觉怎么样？是不是很快乐啊？

如果看完文章之后对你有帮助，欢迎评论、转发、收藏和关注！