本文目的是介绍如何使用vue.js去构建一个单页面应用。
nodeJs
nodeJs安装
Node.js是一个Javascript运行环境(runtime)
nodejs内置npm。
node -v
npm -v
查看是否安装成功以及查看版本号
nodeJs模块
教程：http://www.runoob.com/nodejs/nodejs-tutorial.html
demo：https://git.oschina.net/MRLH/nodeJsLearning.git
见work-07
了解一下export和import
npm介绍
官网：https://www.npmjs.com/
官方文档：https://docs.npmjs.com/getting-started/what-is-npm
简易汉化：http://www.jianshu.com/nb/10645887
NPM的全称是Node Package Manager ，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。
我们要先配置npm的全局模块的存放路径以及cache的路径。
npm config set prefix “D:\nodejs\node_global”
以及
npm config set cache “D:\nodejs\node_cache”
增加NODE_PATH(全局变量模块存放位置)
打开系统对话框，“我的电脑”右键“属性”-“高级系统设置”-“高级”-“环境变量”。
进入环境变量对话框，在系统变量下新建”NODE_PATH”，输入”D:\nodejs\node_global\node_modules”。（ps：这一步相当关键。）
由于改变了module的默认地址，所以上面的用户变量都要跟着改变一下（用户变量”PATH”新增“%NODE_PATH%;”），要不使用module的时候会导致输入命令出现“xxx不是内部或外部命令，也不是可运行的程序或批处理文件”这个错误。
cnpm
由于国内有墙的原因，使用npm下载包相当慢，有可能因为网速原因导致下载包失败。所以推荐使用cnpm，下载源为淘宝的镜像。
http://npm.taobao.org/
支持 npm 除了 publish 之外的所有命令。
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
npm常用指令介绍
下面的npm皆可用cnpm替代
npm init
执行该指令将会在当前文件夹下生成一个package.json文件。这个文件类似于maven的pom.xml文件。用于管理包，以及记录当前项目的一些描述信息。
package.json文件
dependencies里面放的是项目依赖的包。如vue
devDependencies里面放的是开发时编译需要的包。如babel，[xx]-loader。
npm install
安装命令
简写：npm i
npm install
会安装package.json文件中声明的包，会把包安装到当前文件夹的node_modules目录中。
npm install packagename
安装指定名字的包
npm install packagename -g
安装指定名字的包到全局，这个一般是用于安装需要在命令行使用到的包，如webpack。
npm install packagename --save
安装项目依赖的包，也就是项目中会用到的包，如vue。同时在package.json文件的dependencies中添加该包的描述。
npm i packagename --save-dev
安装编译时需要的包，如babel，[xx]-loader等等。同时在package.json文件的devDependencies中添加该包的描述。
npm uninstall packagename
用于卸载包
webpack
用于打包的一个工具
一些样例：
https://github.com/ruanyf/webpack-demos#demo01-entry-file-source
babel
用于把高版本的js语法转换为低版本语法，让项目中可以使用最新的js语法。
ECMAScript 6语法学习：http://es6.ruanyifeng.com/
eslint
代码质量管理工具，用来避免低级错误和统一代码的风格，这个在项目中可以关闭。
Vue.js
Vue 不支持 IE8 以及更低版本浏览器。
Vue-cli
参考文档：http://www.jianshu.com/p/f8e21d87a572
专门用来下载项目模板的，项目搭建好就不需要了。
npm i -g vue-cli
安装vue-cli
vue -V
检查是否安装成功
vue init webpack my-project
初始化vue工程，或者说是创建模板项目。
项目名为my-project
cd my-project
npm install
安装项目依赖
npm run dev
运行项目
npm run build
编译打包项目，打包到dist目录
vue.js基础
官方文档：https://cn.vuejs.org/v2/guide/
一些demo: https://git.oschina.net/MRLH/vueLearning.git
个人见解：和el表达式很像，和anglarJs更像。
注意事项：注意对象属性的添加和数组中元素的添加。
见：https://cn.vuejs.org/v2/guide/list.html#数组更新检测
见：https://cn.vuejs.org/v2/guide/reactivity.html#变化检测问题
项目实战
demo地址：https://git.oschina.net/MRLH/vue-time-tracker.git
demo详解: http://blog.csdn.net/sinat_17775997/article/details/55097003
目录分析
build，config，test放一些配置文件，一般不进行修改。
node_modules放置项目依赖的包文件。
dist目录放置打包后生成的文件，发布时只需要dist文件夹
static放置静态资源不会参与打包，一般放置一些图片资源，不要放样式文件到这个里面，shotcut文件放这个目录里面。
src目录放置源码
index.html一般不做修改。
assets目录用来放置资源文件
components放置vue组件
router用于控制界面跳转
store用于存储数据，以及操作数据
views用于存放vue界面
views和components存放的东西是没有区别的，都是vue组件，只是根据作用不同进行区分的。
vue-resource
官方建议使用axios
main.js
import axios from 'axios'
Vue.prototype.$http = axios
其他地方使用的话 如同使用 vue-resource 一样
this.$http.get(URL).then(response => {
// success callback
}, response => {
// error callback
})
Vue-router
官方文档：https://router.vuejs.org/zh-cn/
一个vue实例只有一个vue-router。
通常一个
router-link
name
router-view
路由匹配到的组件将渲染在这里
vuex
官方文档：https://vuex.vuejs.org/zh-cn/
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
- state，驱动应用的数据源；
- view，以声明方式将state映射到视图；
- actions，响应在view上的用户输入导致的状态变化。
以下是一个表示“单向数据流”理念的极简示意：
但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：
- 多个视图依赖于同一状态。
- 来自不同视图的行为需要变更同一状态。
Vuex 可以帮助我们管理共享状态
State
用于存放数据
取数据方法：
this.$store.state.xxx
Getters
用于存放处理后的数据
取数据方法：
this.$store.getters.xxx
Mutations
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
调用方法
store.commit('xxx')
Actions
Action 类似于 mutation，不同在于：
- Action 提交的是 mutation，而不是直接变更状态。
- Action 可以包含任意异步操作。
调用方法
store.dispatch('increment')
Modules
使用单一状态树，导致应用的所有状态集中到一个很大的对象。但是，当应用变得很大时，store 对象会变得臃肿不堪。
为了解决以上问题，Vuex 允许我们将 store 分割到模块（module）。每个模块拥有自己的 state、mutation、action、getters、甚至是嵌套子模块。