一、简介
Vue.js 是什么
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue.js是一个MVVM模式的框架。
vue.js的特点:
易用： 已经会了HTML,CSS,JavaScript？即刻阅读指南即可开始构建应用！
灵活： 简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
高效： 16kb min+gzip 的运行大小,超快虚拟 DOM ,最省心的优化。
二、环境搭建
Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言
npm: Nodejs下的包管理器。由于国内使用npm会很慢,这里推荐使用淘宝NPM镜像（http://npm.taobao.org/）
$ npm install-g cnpm--registry=https://registry.npm.taobao.org
webpack: 它主要的用途是通过 CommonJS 的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。
vue-cli: 用户生成Vue工程模板
三、安装node.js
1.从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以了（傻瓜式安装），注意安装的地址。
安装完成之后，打开命令行工具，输入 node -v，如果出现相应的版本号，则说明安装成功。
2.npm包管理器，是集成在node中的，所以，直接输入 npm -v 就会显示出npm的版本信息。
总：cmd下（win+R进入命令行模式）输入：
node -v //验证node.js 是否安装成功，显示出相应的版本信息
npm -v //验证npm包管理器是否安装成功，显示出相应的版本信息
3.OK！node环境已经安装完成，npm包管理器也有了。由于有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所有我还需要npm的国内镜像---cnpm。(如果想进一步了解cnpm的，查看淘宝npm镜像官网)
安装cnpm
在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org 然后等待安装完成。
完成之后，我们就可以用cnpm代替npm来安装依赖包了。
安装vue-cli脚手架构建工具
在命令行中运行命令 npm install -g vue-cli ，然后等待安装完成。
通过以上三部，我们需要准备的环境和工具都准备好了，接下来就开始使用vue-cli来构建项目。
构建项目：
首先我们要选择存放项目的位置，然后再用命令行将目录转到选定的目录，在这里，我选择在c盘下创建新的目录（firstVue 目录），用cd 将目录切到该目录下，cd firstVue ,在NodeTest 目录下，在命令行中运行命令 vue init webpack firstApp 。解释一下这个命令，这个命令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的。其中firstApp是整个项目文件夹的名称，这个文件夹会自动生成在你指定的目录中（我的实例中，会在firstVue 目录生成该文件夹），如下图。
总：在cmd中，cd firstVue //进入指定目录firstVue
vue init webpack firstApp //初始化一个项目
解释一下初始项目是的一些配置选项（可以一直按回车去填写就好了）：
'git' �����ڲ����ⲿ���Ҳ���ǿ����еij���
�������ļ�
? Project name sell 项目的名字
? Project description sell app 项目描述
? Author lhb 作者
? Vue build standalone
? Install vue-router? Yes //是否安装路由
? Use ESLint to lint your code? Yes //es6的代码风格检查器
? Pick an ESLint preset Standard //es6的模板使用标准就可以
? Setup unit tests with Karma + Mocha? Yes //单元测试
? Setup e2e tests with Nightwatch? Yes //e2e或者端到端（end-to-end）或者UI测试是一种测试方法，它用来测试一个应用从头到尾的流程是否和设计时候所想的一样。简而言之，它从一个用户的角度出发，认为整个系统都是一个黑箱，只有UI会暴露给用户。
接下来，我们去NoteTest目录下去看是否已创建文件， 打开firstApp 项目，项目中的目录如下：
介绍一下各个目录及其作用：
build //webpack 配置相关文件夹
config //webpack 配置相关文件夹
node_modules //cnpm install 安装的依赖代码库文件夹
src //存放源码的文件夹，这里是我们开发的主要目录，基本上要做的事情都在这个目录里面，里面包含了几个目录及文件：
assets:放置一些图片，如logo等
components:目录里放的是一个组件文件，可以不用。
App.vue：项目入口文件，我们也可以将组件写这里，而不使用components目录。
main.js ：项目的核心文件
static //第三方资源文件夹，静态资源目录，如图片、字体等
test //初始测试目录，可删除
.babelrc //第三方babel转化（比如es2016转es2015）配置文件
.editorconfig //编辑器配置文件
.eslintignore //忽略语法检查的目录文件
.eslintrc // .eslintrc 的配置文件
.gitignore //git忽略的配置文件
index.html //入口文件，可以添加一些meta信息或者同统计代码啥的
package.json //配置文件
README.md //项目描述文件
这就是整个项目的目录结构，其中，我们主要在src目录中做修改。这个项目现在还只是一个结构框架，整个项目需要的依赖资源都还没有安装。
安装项目所需要的依赖：执行 cnpm install (这里可以用cnpm代替npm了)
安装完依赖包资源后，我们就可以运行整个项目了。
四、运行项目
在项目目录中，运行命令 npm run dev ，（注意是否为项目目录，若不是用cd命令进入目录下），运行后如下：
项目启动后，在浏览器中输入项目启动后的地址：http://localhost:8080,在浏览器中会出现vue的logo.
至此，vue的npm安装方式已介绍完毕。
