我们直接从vue的工程化开始入手。
在这里用git命令行搭建项目环境。（当然直接cmd命令行下也是一样的）
git下载安装地址：https://www.git-scm.com/download/win
git使用教程:http://www.cnblogs.com/havenshen/p/3493522.html
git常用命令整理：http://www.cnblogs.com/luxiaoxing/p/7545403.html
1.node安装。
node下载安装地址：http://nodejs.cn/download/
注 ：安装 vue-cli 脚手架目前需要node版本为 v4.0 以上；
安装过程就是一直点击Next就好，安装完成后可以在命令行输入node -v查看版本信息。
2.安装淘宝镜像。在命令行下输入：
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装完成后可以在命令行输入cnpm -v查看版本信息。
因为npm的服务器在国外，有时候安装依赖的时候会很慢，所以用cnpm来安装依赖会相当快,其用法跟npm一样。（推荐使用cnpm）
3.安装webpack，在命令行下输入：
cnpm install webpack -g
安装完成后可以在命令行输入webpack -v查看版本信息。（如安装错误需全局安装webpack-cli,在命令行输入cnpm install webpack-cli -g）
webpack详细使用教程请移步：[js高手之路]深入浅出webpack教程系列
4.安装vue-cli。在命令行下输入：
cnpm install -g vue-cli
安装完成后可以在命令行输入vue -V查看版本信息。
这个vue-cli呢，是vue的脚手架工具，可以自动生成目录，跟express生成器差不多。
现在我们就可以用vue-cli脚手架生成一个工程项目了，项目名称是test。
1.选择或新建一个文件夹作为你的工程项目目录。
2.在这个指定的文件夹上面右击选中Git Bash就可以打开命令行了（没有安装git的可以cd 切换到你指定的目录下），在命令行下输入：
vue init webpack test
这时候会有一些提示你的信息，你只需一直回车即可。如下图test这个项目的基本结构就自动生成了。
此时我们就可以在指定的文件夹下看到test这个新生成的项目文件夹以及里面的项目结构了。
3.同时我们在test这个文件夹下打开命令行，安装项目所需的依赖(因为用脚手架的时候会自动构建package.json文件，所以这里直接安装依赖就好)。命令行下输入：
cnpm install
安装完成后test文件夹里面会多一个node_modules的文件夹也就是所需的依赖文件了。
4.运行项目。在test文件夹下打开命令行并输入：
npm run dev
服务启动成功后浏览器会默认打开一个“欢迎页面”，如下图：
最后，这个test的项目就用vue-cli脚手架工具构建好了。
项目部署
接下来，使用npm run build来部署上线的项目
npm run build
生成的dist目录，就是打包构建后的项目目录。