<a href="#nodejs">nodeJs</a>
- <a href="#nodeJs安装">nodeJs安装</a>
- <a href="#nodeJs模块">nodeJs模块</a>
<a href="#npm介绍">npm介绍</a>
- <a href="#cnpm">cnpm</a>
- <a href="#npm常用指令介绍">npm常用指令介绍</a>
  - <a href="#npm-init">npm init</a>
    - <a href="#packagejson文件">package.json文件</a>
  - <a href="#npm-install">npm install</a>
- <a href="#webpack">webpack</a>
<a href="#Vuejs">Vue.js</a>
- <a href="#Vue-cli">Vue-cli</a>
- <a href="#vuejs基础">vue.js基础</a>
- <a href="#项目实战">项目实战</a>
  - <a href="#目录分析">目录分析</a>
- <a href="#vue-resource">vue-resource</a>
- <a href="#Vue-router">Vue-router</a>
- <a href="#vuex">vuex</a>
  - <a href="#Getters">Getters</a>
  - <a href="#Mutations">Mutations</a>
  - <a href="#Actions">Actions</a>
  - <a href="#Modules">Modules</a>

本文目的是介绍如何使用vue.js去构建一个单页面应用。

nodeJs</a>

nodeJs安装</a>

Node.js是一个Javascript运行环境(runtime)

nodejs内置npm。

node -v

npm -v

查看是否安装成功以及查看版本号

nodeJs模块</a>

教程：http://www.runoob.com/nodejs/nodejs-tutorial.html
demo：https://git.oschina.net/MRLH/nodeJsLearning.git
见work-07
了解一下export和import

npm介绍</a>

官网：https://www.npmjs.com/
官方文档：https://docs.npmjs.com/getting-started/what-is-npm
简易汉化：//www.greatytc.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</a>

由于国内有墙的原因，使用npm下载包相当慢，有可能因为网速原因导致下载包失败。所以推荐使用cnpm，下载源为淘宝的镜像。
http://npm.taobao.org/

支持 npm 除了 publish 之外的所有命令。

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

npm常用指令介绍</a>

下面的npm皆可用cnpm替代

npm init</a>

执行该指令将会在当前文件夹下生成一个package.json文件。这个文件类似于maven的pom.xml文件。用于管理包，以及记录当前项目的一些描述信息。

package.json文件</a>

dependencies里面放的是项目依赖的包。如vue
devDependencies里面放的是开发时编译需要的包。如babel，[xx]-loader。

npm install</a>

安装命令
简写：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</a>

用于打包的一个工具

一些样例：
https://github.com/ruanyf/webpack-demos#demo01-entry-file-source

babel</a>

用于把高版本的js语法转换为低版本语法，让项目中可以使用最新的js语法。

ECMAScript 6语法学习：http://es6.ruanyifeng.com/

eslint</a>

代码质量管理工具，用来避免低级错误和统一代码的风格，这个在项目中可以关闭。

Vue.js</a>

Vue 不支持 IE8 以及更低版本浏览器。

Vue-cli</a>

参考文档：//www.greatytc.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基础</a>

官方文档：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#变化检测问题

项目实战</a>

demo地址：https://git.oschina.net/MRLH/vue-time-tracker.git
demo详解: http://blog.csdn.net/sinat_17775997/article/details/55097003

目录分析</a>

build，config，test放一些配置文件，一般不进行修改。
node_modules放置项目依赖的包文件。
dist目录放置打包后生成的文件，发布时只需要dist文件夹
static放置静态资源不会参与打包，一般放置一些图片资源，不要放样式文件到这个里面，shotcut文件放这个目录里面。
src目录放置源码
index.html一般不做修改。

assets目录用来放置资源文件
components放置vue组件
router用于控制界面跳转
store用于存储数据，以及操作数据
views用于存放vue界面

views和components存放的东西是没有区别的，都是vue组件，只是根据作用不同进行区分的。

vue-resource</a>

官方建议使用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</a>

官方文档：https://router.vuejs.org/zh-cn/
一个vue实例只有一个vue-router。
通常一个

router-link</a>

<router-link to="src">name</router-link>

用于页面导航，效果约等于<a>标签

router-view</a>

<router-view></router-view>

路由匹配到的组件将渲染在这里

vuex</a>

官方文档：https://vuex.vuejs.org/zh-cn/

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

state，驱动应用的数据源；
view，以声明方式将state映射到视图；
actions，响应在view上的用户输入导致的状态变化。

以下是一个表示“单向数据流”理念的极简示意：

单向数据流

但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

多个视图依赖于同一状态。
来自不同视图的行为需要变更同一状态。

Vuex 可以帮助我们管理共享状态

vuex

State</a>

用于存放数据

取数据方法：

this.$store.state.xxx

Getters</a>

用于存放处理后的数据