搭建前端环境：
一、下载并安装node和npm
首先，从Node.js官网
下载对应平台的安装程序。本教程将下载windows环境下的node，使用linux的童鞋可以点击“下载”，里面有所有版本的node。
下载完成之后，打开安装包，进行安装，安装过程全部默认属性即可。
安装完成之后，打开cmd命令行，输入“node -v”,如果出现node版本号，即安装成功。
node安装好之后，我们先认识一下npm。
npm是什么东东？
npm其实是Node.js的包管理工具（package manager）。
为啥我们需要一个包管理工具呢？因为我们在Node.js上开发时，会用到很多别人写的JavaScript代码。如果我们要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代码，解压，再使用，非常繁琐。于是一个集中管理的工具应运而生：大家都把自己开发的模块打包后放到npm官网上，如果要使用，直接通过npm安装就可以直接用，不用管代码存在哪，应该从哪下载。
更重要的是，如果我们要使用模块A，而模块A又依赖于模块B，模块B又依赖于模块X和模块Y，npm可以根据依赖关系，把所有依赖的包都下载下来并管理起来。否则，靠我们自己手动管理，肯定既麻烦又容易出错。
其实npm已经在Node.js安装的时候顺带装好了。我们在命令提示符或者终端输入npm -v，应该看到类似的输出：
二、安装vue及脚手架
在用Vue构建大型应用时推荐使用npm安装。npm能很好的和webpack打包器配合使用。
打开cmd命令窗口，输入“npm install vue”，安装完成之后，我们就要安装vue-cli
什么是vue-cli呢？
vue-cli是Vue 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：
在命令行中输入以下命令：
全局安装 vue-cli
$ npm install –global vue-cli
三、创建一个基于webpack的vue项目
webpack是一个打包工具。
打开你预想的项目所在的文件夹。例如：我想把项目放在D盘的“my-project”文件夹里，就在命令行里输入”cd d:”,进入D盘后，输入“cd my-project”，进入“my-project”文件夹。
然后输入：
$ vue init webpack my-project
根据提示填好信息即可。
若想运行文件，在命令行里输入：
$ npm install \下载依赖
$ npm run dev \运行文件