Vue2.0搭建Vue脚手架（vue-cli）

随着vue.js越来越火爆，更多的项目都用到vue进行开发，在实际的开发项目中如何搭建开发脚手架呢？
首先需要了解的知识：
html、css、JavaScript、node.js（npm包管理器）、webpack自动化构建工具

安装node.js

https://nodejs.org/zh-cn/官网下载安装即可
输入node -v查看版本：

安装cnpm

1.说明：npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）
2.使用npm安装插件：命令提示符执行npm install < name >
3.选装cnpm因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常
安装cnpm：npm install -g cnpm --registry=http://registry.npm.taobao.org
输入cnpm -v，可以查看当前cnpm版本

安装vue-cli脚手架构建工具

vue-cli提供一个官方命令行工具，可用于快速搭建大型单页面应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程，只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：
全局安装：cnpm install vue-cli -g
安装完成之后输入vue -V，查看版本号：

创建一个基于webpack模板的新项目

要创建项目，首先我们要选定目录，然后再命令行把目录转到选定的目录
vue init webpack 项目名称

运行初始化命令的时候让用户输入几个基本的选项，如项目名称，描述，作者等信息，如果不想填直接回车默认就好

运行项目

cnpm run dev

运行成功后，浏览器直接显示的是页面如下：

安装项目所需要的的依赖

刚初始化的项目是没有依赖的，如果运行会报类似这样的错误，输入
cnpm install

文件目录

vue项目目录结构：

├─build/                                            #webpack编译任务配置文件：开发环境与生产环境
│  └─……
├─config/
│  └─index.js                                    #项目核心配置
│  └─……
├─node_modules/                            #项目中安装的依赖模块
├─src/
│  └─main.js                                     #程序入口文件
│  └─App.vue                                   #程序入口vue组件
│  └─assets/                                     #资源文件夹，一般放一些静态资源文件
│  └─components/                           #组件 
│  └─router/
│  └─……
├─static                                            #纯静态资源（直接拷贝到dist/static/里面）
├─test/
    └─e2e/                                         #端到端测试
    │  └─custom-assertions/              #端到端测试自定义断言
    │  └─specs/                                  #测试规范
    │  └─runner.js                              #运行测试的脚本
    └─unit/                                         #单元测试
        └─specs                                  #测试规范
        └─index.js                               #测试入口文件
        └─karma.conf.js                      #测试运行配置文件
├─.babelrc                                       #babel配置文件
├─.editorconfig                                 #编辑配置文件
├─.gitignore                                      #用来过滤一些版本控制的文件，比如node_modules文件夹
├─index.html                                     #index.html入口模板文件
├─package.json                                #项目文件，记载着一些命令和依赖还有简要的项目描述信息
├─README.md                                #介绍自己这个项目的，可参照GitHub