vue的搭建（使用vue的脚手架vue-cli）

先说说前言，因为最近在看技术，vue还是很火的，至少现在做vue的公司很多，相比于angular我觉得vue更适合上手，所以我今天就讲讲怎么搭建vue的项目文件，当然这个也是我自己搭过一遍的，也走了一下接口，获取到了数据。这篇先将怎么用脚手架搭建项目说一下，后面再说例子。

说明：此文章参考了网上一些大神的技术分享，自己结合总结一下。此文章是基于webpack构建的vue项目

一.首先搭建环境，使用nodejs自带的包管理工具安装

1.安装node.js，从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以了（傻瓜式安装）。安装完成之后，打开命令行工具(win+r，然后输入cmd)，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功。

注意的是npm的版本最好是3.x.x以上，以免对后续产生影响，升级可以敲入命令cnpm install npm -g（至于cnpm是什么，我下面会说到）

2.由于 npm 安装速度慢，需要使用淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。（打开命令行，敲入npm install -g cnpm –registry=https://registry.npm.taobao.org）

安装完成后，查看版本出现版本号，就说明安装成功了

3.安装webpack，打开命令行工具输入：cnpm install webpack -g，安装完成后记得要安装webpack-cli，自行安装，打开命令行输入：cnpm install webpack-cli -g，（至于为什么要自行安装，是因为我根据它提示安装的时候老报错，自己全局安装后就好了），安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。

4.安装vue-cli脚手架构建工具，打开命令行工具输入：cnpm install vue-cli -g，安装完成之后输入 vue -V（注意这里是大写的“V”），如下图，如果出现相应的版本号，则说明安装成功。

二、通过以上四步，我们需要准备的环境和工具都准备好了，接下来就开始使用vue-cli来构建项目

1.在硬盘上找一个文件夹放工程用的。这里有两种方式指定到相关目录：①cd 目录路径 ②如果以安装git的，在相关目录右键选择Git Bash Here
2.这里我新建了一个文件夹叫vue-demo,我们用命令打开D盘找到这个文件然后安装vue，如下图所示：

3.全局安装vue的脚手架vue-cli，打开命令行，在该文件夹下输入：cnpm install –global vue-cli，如下图：

4.创建一个基于 webpack 模板的新项目,打开命令输入：vue init webpack my-project

创建好的项目包如下图所示：

5.启动项目，输入：cnpm run dev。服务启动成功后浏览器会默认打开一个“欢迎页面”，如下图：

注意：这里是默认服务启动的是本地的8080端口，所以请确保你的8080端口不被别的程序所占用。
修改端口号如下图：

至此简单的一个项目构建完毕….后面我将继续利用这个构建的项目写一个简单的单页面应用。