接上篇《1.入门介绍：Vue解决了什么痛点？》
上一篇我们介绍了整个前端的技术栈情况，以及对Vue进行的基本介绍和其优点和特色，本篇我们来搭建Vue的运行环境，并构建一个官方实例工程运行。
我们登录Vue的官网https://cn.vuejs.org，可以看到Vue的起步按钮，其三个特色也在首页进行了标明：
一、搭建Vue的开发环境
在使用Vue之前，我们首先要搭建Vue的环境，我们点击上面的“起步”按钮，进步基础教程页面：
我们点击左侧树形菜单的“安装”，进入Vue的安装教程页面，一般搭建Vue环境有两种模式，一种模式是“直接用 <script> 引入”（像第一篇我们写的两个例子一样），另一种方式是使用脚手架来搭建Vue环境，这里我们详细讲解一下第二种模式。
1、安装Node.js
因为搭建Vue的工具的命令行是需要Node.js支持的，所以我们首先要安装Node.js。安装Node服务组件的详细步骤见https://www.runoob.com/nodejs/nodejs-install-setup.html，这里不再赘述。
安装完成之后，在cmd窗口中输入“node --version”可以看到Node的版本时，Node环境就安装成功了：
注：随同NodeJS一起安装的还有一个NPM包管理工具，是后面我们构建环境需要的很重要的安装包工具。
2、安装Vue的命令行工具（脚手架工具）
Vue提供了一个官方的脚手架工具，这个工具可以快速搭建单页面应用的环境，通过这个脚手架工具构建出来的工程，带有热重载、保存时lint校验，以及生产环境可用的效果。
安装脚手架工具，我们需要用到npm，npm是JavaScript世界的包管理工具,并且是Node.js平台的默认包管理工具。通过npm可以安装、共享、分发代码，管理项目依赖关系。后端的同学，可以理解为npm像是maven一样。
打开cmd，通过以下指令下载Vue的脚手架工具：
npm install --global vue-cli
运行后我们可以看到在从远程仓库中下载Vue命令行工具：
安装完成之后，我们就可以在cmd中使用Vue的命令了。
二、构建并运行一个项目
1、构建一个测试工程
然后我在D盘中设置了一个“vue-cli”的文件夹，准备在里面生成一个名为“vue-demo01”的vue项目，指令如下：
vue init webpack vue-demo01
在安装过程中，需要设置一些参数，如下：
前三个分别是定义即将构建的工程的名称、描述以及作者信息，然后提示是否安装vue-router，这里选择Y，这个具体是什么，我们后面来讲解。然后就是会否使用EsLint，它是一个语法检查工具，这里我们选择N，因为一旦我们输入语法有问题，它都会报错，在开发熟练的情况下，为了提高效率就不选择它。剩下的创建测试环境、测试运行等直接回车即可。
注：如果webpack安装出现SyntaxError:Block-scopeddeclarations错误，是因为Node版本过低导致的，需要更新，具体操作参照：https://blog.csdn.net/qwdafedv/article/details/58048935
如果在构建中出现了错误，在该工程目录下再执行一下“npm install”。
安装完毕之后，会在相应盘符下得到一个结构完整的工程样例，结构如下：
2、运行构建的工程
然后我们在命令行打开这个工程的目录，执行npm的run命令，这里运行模式为dev开发模式：
npm run dev
可以看到项目跑起来了，默认运行在8080端口。
我们在浏览器中输入“ http://localhost:8080”，即可查看到刚刚我们构建的样例工程的主页面：
这里我们使用代码编辑器（这里我用的是Hbuilder），打开工程的目录：
我们修改一下App.vue，在上面加上一句“你好！Vue”：
然后保存该文件，不用刷新刚刚的页面，写的字符就自动出现了：
至此我们完成了Vue环境的搭建，以及使用脚手架生成一个工程的操作。下一篇我们对生成的工程进行目录结构分析，进行一些基本语法的讲解。
参考：
《IT营：itying.com-2018年Vue2.x 5小时入门视频教程》
转载请注明出处：https://blog.csdn.net/acmman/article/details/106882178