init

.gitignore

+.DS_Store
+node_modules/
+*.log
+

bower_components/ota.css/.bower.json

+{
+  "name": "ota.css",
+  "homepage": "https://github.com/otarim/ota.css",
+  "authors": [
+    "otarim <otarim.com@gmail.com>"
+  ],
+  "main": "ota.css",
+  "license": "MIT",
+  "_release": "c0953a2653",
+  "_resolution": {
+    "type": "branch",
+    "branch": "master",
+    "commit": "c0953a26535807823983815e87f1a50f1154fe67"
+  },
+  "_source": "git://github.com/otarim/ota.css.git",
+  "_target": "*",
+  "_originalSource": "ota.css",
+  "_direct": true
+}
\ No newline at end of file

bower_components/ota.css/LICENSE

+The MIT License (MIT)
+
+Copyright (c) 2015 otarim
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

bower_components/ota.css/README.md

+# ota.css
+自用基础样式

bower_components/ota.css/bower.json

+{
+  "name": "ota.css",
+  "version": "1.0.3",
+  "homepage": "https://github.com/otarim/ota.css",
+  "authors": [
+    "otarim <otarim.com@gmail.com>"
+  ],
+  "main": "ota.css",
+  "license": "MIT"
+}

bower_components/ota.css/license.txt

+TYPO.CSS - a better way to manage the typography of your Chinese-lang-base site.
+
+Copyright (C) 2012 Sofish Lin http://sofish.de
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

bower_components/ota.css/ota.css

+@charset "utf-8";
+
+* {
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box
+}
+html {
+	-webkit-font-smoothing: subpixel-antialiased
+}
+body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, menu, nav, section {
+	margin: 0;
+	padding: 0
+}
+audio, canvas, video {
+	display: inline-block
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0
+}
+fieldset, img {
+	border: 0
+}
+img {
+	vertical-align: top;
+	max-width: 100%
+}
+del {
+	text-decoration: line-through
+}
+address, caption, cite, code, dfn, em, th, var {
+	font-style: normal;
+	font-weight: bold
+}
+ul, ol {
+	list-style: none
+}
+caption, th {
+	text-align: left
+}
+sub, sup {
+	font-size: 10px;
+	line-height: 0;
+	position: relative
+}
+sup {
+	top: -0.25em
+}
+sub {
+	bottom: -0.25em
+}
+mark {
+	background: #FFEB3B;
+	padding: 0 5px;
+	color: #3A3A3A
+}
+pre, code, var {
+	font-family: consolas, mocaco, serif;
+	font-size: 13px;
+	font-weight: 400
+}
+pre {
+	background: #f8f8f8;
+	border: 1px solid #D7D7D7;
+	padding: 10px
+}
+hr {
+	border: none;
+	border-bottom: 1px solid #607D8B;
+	margin-bottom: 10px;
+	height: 1px
+}
+small {
+	font-size: 10px;
+	color: #4A4A4A
+}
+strong, b, em {
+	font-weight: bold;
+	color: #000
+}
+.clearfix:before, .clearfix:after {
+	content: '';
+	display: table
+}
+.clearfix:after {
+	clear: both
+}
+html {
+	color: #333
+}
+body, button, input, select, textarea {
+	font: 16px "Helvetica Neue", Helvetica, "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Micro Hei Mono", "WenQuanYi Zen Hei", "WenQuanYi Zen Hei Mono", sans-serif;
+	color: #333
+}
+blockquote {
+	border-left: 5px solid #D7D7D7;
+	margin: 10px;
+	padding: 10px;
+	font-style: italic;
+	color: #999
+}
+code {
+	border-radius: 5px;
+	color: #E91E63;
+	padding: 5px 10px
+}
+var {
+	color: #E91E63;
+	font-style: italic
+}
+a {
+	color: #3F51B5;
+	text-decoration: none
+}
+a:hover {
+	text-decoration: underline
+}
+p, pre, ul, ol, dl, form, hr, table, blockquote {
+	margin-bottom: 10px
+}
+h1, h2, h3, h4, h5, h6 {
+	font-weight: 200;
+	color: #000;
+	margin-bottom: 5px;
+	line-height: 1.5
+}
+h1 {
+	font-size: 38px
+}
+h2 {
+	font-size: 34px
+}
+h3 {
+	font-size: 30px
+}
+h4 {
+	font-size: 26px
+}
+h5 {
+	font-size: 22px
+}
+h6 {
+	font-size: 18px
+}
+p {
+	line-height: 1.8
+}
+ul {
+	margin-left: 10px;
+	list-style: disc;
+	line-height: 1.5
+}
+ol {
+	list-style: decimal;
+	margin-left: 32px;
+	line-height: 1.5
+}
+th, td, caption {
+	border: 1px solid #ddd;
+	padding: 5px 10px;
+	color: #3A3A3A
+}
+th, caption {
+	background: #D7D7D7
+}
+caption {
+	border-bottom: none
+}
+input[type="text"], input[type="password"], input[type="email"], input[type="url"], textarea, select {
+	-webkit-appearance: none;
+	border-radius: 0
+}
+::-moz-selection {
+	background: #03A9F4;
+	color: #fff
+}
+::selection {
+	background: #03A9F4;
+	color: #fff
+}
+button, input[type="button"], input[type="submit"], input[type="reset"], .btn {
+	color: #333;
+	display: inline-block;
+	border: none;
+	background: #D7D7D7;
+	border-bottom: 2px solid #555;
+	padding: 8px 10px;
+	line-height: 1.2;
+	text-align: center;
+	cursor: pointer;
+	vertical-align: middle;
+	text-decoration: none;
+}
+button:hover, input[type="button"]:hover, .btn:hover {
+	background: #E7E6E6
+}
+.btn:hover {
+	border-bottom: 2px solid #555
+}
+button:focus {
+	outline: none
+}
+.btn-primary, .btn-secondary, .btn-success, .btn-danger, input[type="submit"], input[type="reset"] {
+	color: #fff
+}
+.btn-primary, input[type="submit"] {
+	background-color: #03A9F4
+}
+.btn-primary:hover, input[type="submit"]:hover {
+	background-color: #00C3FF
+}
+.btn-secondary {
+	background-color: #00BCD4
+}
+.btn-secondary:hover {
+	background-color: #00D1ED
+}
+.btn-success {
+	background-color: #8BC34A
+}
+.btn-success:hover {
+	background-color: #9AD952
+}
+.btn-warning {
+	background-color: #FFE500
+}
+.btn-warning:hover {
+	background-color: #FFEB3B
+}
+.btn-danger, input[type="reset"] {
+	background-color: #E51C23
+}
+.btn-danger:hover, input[type="reset"]:hover {
+	background-color: #FF1F26
+}
+input[type="text"], input[type="password"], input[type="email"], input[type="url"],textarea, select {
+	border: none;
+	border: 1px solid #D7D7D7;
+	padding: 8px;
+	line-height: 1.2;
+	vertical-align: middle
+}
+textarea {
+	resize: none
+}
+input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="url"]:focus,textarea:focus, select:focus {
+	outline: none;
+	border-color: #3bb4f2;
+	box-shadow: 0 0 5px #03A9F4
+}
+input[type="file"]:focus, input[type="file"]:active {
+	outline: none
+}
+select:not([multiple]) {
+	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+) no-repeat 100% center
+}
+[type="checkbox"]:not(:checked),
+[type="checkbox"]:checked {
+	position: absolute;
+	left: -9999px;
+}
+[type="checkbox"]:not(:checked) + label,
+[type="checkbox"]:checked + label {
+	position: relative;
+	padding-left: 25px;
+	cursor: pointer;
+}
+[type="checkbox"]:not(:checked),
+[type="checkbox"]:checked {
+	position: absolute;
+	left: -9999px;
+}
+[type="checkbox"]:not(:checked) + label,
+[type="checkbox"]:checked + label {
+	position: relative;
+	padding-left: 25px;
+	cursor: pointer;
+}
+[type="checkbox"]:not(:checked) + label:before,
+[type="checkbox"]:checked + label:before {
+	content: '';
+	position: absolute;
+	left:0; top: 2px;
+	width: 17px; height: 17px;
+	border: 1px solid #D7D7D7;
+}
+[type="checkbox"]:not(:checked) + label:after,
+[type="checkbox"]:checked + label:after {
+	content: '✔';
+	position: absolute;
+	top: 3px; left: 4px;
+	font-size: 18px;
+	line-height: 0.8;
+	color: #3F51B5;
+}
+[type="checkbox"]:not(:checked) + label:after {
+	opacity: 0;
+}
+[type="checkbox"]:checked + label:after {
+	opacity: 1;
+}

bower_components/ota.css/package.json

+{
+  "name": "ota.css",
+  "version": "1.0.5",
+  "description": "ota.css",
+  "main": "ota.css",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/otarim/ota.css.git"
+  },
+  "keywords": [
+    "ota.css",
+    "otarim"
+  ],
+  "author": "otarim",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/otarim/ota.css/issues"
+  },
+  "homepage": "https://github.com/otarim/ota.css"
+}

dist/app.css

+.shownotify-transition {
+  -webkit-transition: all .3s ease;
+  transition: all .3s ease; }
+
+.shownotify-enter {
+  opacity: 1; }
+
+.shownotify-leave {
+  opacity: 0; }
+
+.status {
+  margin-left: 2.5rem; }
+
+.notify {
+  background: rgba(241, 210, 76, 0.5);
+  padding: 1rem; }
+.editor[_v-79e9b0d9] {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex; }
+  .editor input[_v-79e9b0d9] {
+    -webkit-box-flex: 2;
+    -webkit-flex: 2;
+        -ms-flex: 2;
+            flex: 2; }
+.list[_v-9cca5706] {
+  overflow: auto;
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  right: 1rem;
+  bottom: 1rem;
+  margin: 0; }
+
+h4[_v-9cca5706] {
+  font-size: 1.3rem; }
+.loading[_v-ce0358fa] {
+  padding: .5rem;
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  border-radius: 5px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate3d(-50%, -50%, 0);
+          transform: translate3d(-50%, -50%, 0); }
+.user[_v-0f158df7] {
+  width: 40%;
+  margin: 0 auto;
+  text-align: center; }
+
+.v-link-active[_v-0f158df7] {
+  background: #fff;
+  color: #3F51B5; }
+
+nav[_v-0f158df7] {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex; }
+  nav a[_v-0f158df7] {
+    font-size: .8rem; }
+
+nav a[_v-0f158df7] {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  text-align: center;
+  margin: 0 .3rem;
+  padding: .3rem;
+  background: #fff;
+  border: 1px solid #dedede;
+  border-bottom: none;
+  background: #DEDEDE;
+  color: #555; }
+  nav a[_v-0f158df7]:first-child {
+    margin-left: 0; }
+  nav a[_v-0f158df7]:last-child {
+    margin-right: 0; }
+
+section[_v-0f158df7] {
+  padding: 3rem;
+  font-size: 1.3rem;
+  color: #777;
+  background: #fff;
+  border: 1px solid #dedede;
+  border-top: none; }

index.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+	<title>vue demo</title>
+	<link rel="stylesheet" href="dist/app.css">
+	<script src="dist/app.js"></script>
+</head>
+<body>
+	<div class="app" id="app">
+		<header>
+			<h1>{{title}}</h1>
+		</header>
+		<section>
+			<router-view></router-view>
+		</section>
+		<nav>
+			<a href="" v-link="{path: '/home'}">首页</a>
+			<a href="" v-link="{path: '/posts'}">文章</a>
+			<a href="" v-link="{path: '/u'}">我的</a>
+		</nav>
+	</div>
+</body>
+</html>
\ No newline at end of file

package.json

+{
+  "scripts": {
+    "start": "webpack --progress --colors --watch"
+  },
+  "dependencies": {
+    "autoprefixer-loader": "^2.1.0",
+    "babel-core": "^6.1.2",
+    "babel-loader": "^6.1.0",
+    "babel-preset-es2016-node5": "^1.1.2",
+    "css-loader": "^0.16.0",
+    "extract-text-webpack-plugin": "^0.9.1",
+    "file-loader": "^0.8.4",
+    "html-loader": "^0.3.0",
+    "sass-loader": "^3.1.1",
+    "style-loader": "^0.13.0",
+    "url-loader": "^0.5.6",
+    "vue": "^1.0.8",
+    "vue-html-loader": "^1.0.0",
+    "vue-loader": "^7.2.0",
+    "vue-router": "^0.7.7",
+    "webpack": "^1.12.6",
+    "webpack-livereload-plugin": "^0.4.0"
+  },
+  "devDependencies": {
+    "image-webpack-loader": "^1.6.2"
+  }
+}

src/components/editor/index.vue

+<style lang="sass" scoped>
+	.editor {
+		display: flex;
+		input {
+			flex: 2;
+		}
+	}
+</style>
+
+<template>
+	<div class="edit">
+		<div class="editor" v-if="show">
+				<input type="text" v-model="msg" placeholder="{{holder}}">
+				<button v-on:click="rep">回复</button>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				show: false,
+				who: null,
+				msg: ''
+			}
+		},
+		computed: {
+			holder() {
+				return '@' + this.who
+			}
+		},
+		ready() {
+			// stopPropagation
+			document.addEventListener('click',this.helper,false)
+		},
+		destroyed() {
+			document.removeEventListener('click',this.helper,false)
+		},
+		events: {
+			showRep: function(who,$index){
+				this.show = true
+				this.who = who 
+				this.$index = $index
+			}
+		},
+		methods: {
+			rep() {
+				this.$dispatch('repDone',this.who,this.$index)
+				this.who = this.$index = this.show = null
+			},
+			helper(e) {
+				if(!this.$el.contains(e.target)){
+					this.show = false
+				}
+			}
+		}
+	}
+</script>
\ No newline at end of file

src/components/home/index.vue

+<template>
+	<div class="home">
+		<status></status>
+		<editor></editor>
+	</div>
+</template>
+
+<script>
+	export default {
+		ready() {
+			this.$on('repDone',function(who,$index){
+				this.$broadcast('repDone',who,$index)
+			})
+			this.$on('showRep',function(who,$index){
+				this.$broadcast('showRep',who,$index)
+			})
+			this.$dispatch('title','首页')
+		},
+		components: {
+			status: require('../status/'),
+			editor: require('../editor/')
+		}
+	}
+</script>
\ No newline at end of file

src/components/post/index.vue

+<template>
+	<p>我是{{$route.params.id}}</p>
+</template>
+
+<script>
+	export default {
+		ready() {
+			this.$dispatch('title',this.$route.params.id)
+		}
+	}
+</script>
\ No newline at end of file

src/components/posts/index.vue

+<style lang="sass" scoped>
+	.list {
+		overflow: auto;
+		position: absolute;
+		top: 1rem;
+		left: 1rem;
+		right: 1rem;
+		bottom: 1rem;
+		margin: 0;
+	}
+	h4 {
+		font-size: 1.3rem;
+	}
+</style>
+
+<template>
+	<div class="posts">
+		<ul class="list" v-scrolling v-bind:callback="scrollFn">
+			<li v-for="post in list" track-by="$index" v-on:click="gotoPost(post)" class="b">
+				<h4>{{post.title}}</h4>
+				<p>{{post.content}}</p>
+			</li>
+		</ul>
+		<spinner v-bind:show="fetching"></spinner>
+	</div>
+</template>
+
+<script>
+	import r from '../../r.js'
+	var getPosts = require('store').getPosts
+	export default {
+		data() {
+			return {
+				fetching: false,
+				list: []
+			}
+		},
+		ready() {
+			this.$dispatch('title','文章列表')
+			this.toggleFetching()
+			getPosts().then(function(d){
+				this.toggleFetching()
+				this.list = d
+			}.bind(this))
+		},
+		destroyed() {
+			
+		},
+		methods: {
+			scrollFn() {
+				if(this.fetching) return
+				this.toggleFetching()
+				var l = this.list.length
+				setTimeout(function(){
+					this.toggleFetching()
+					this.list.push({
+						title: '文章' + (++l),
+						content: '文章内容 a'
+					})
+				}.bind(this),1000)
+			},
+			toggleFetching(){
+				this.fetching = !this.fetching
+			},
+			gotoPost(post) {
+				r.go({
+					name: 'post',
+					params: {
+						id: post.title
+					}
+				})
+			}
+		},
+		components: {
+			spinner: require('../spinner/')
+		}
+	}
+</script>
\ No newline at end of file

src/components/spinner/index.vue

+<style lang="sass" scoped>
+	.loading {
+		padding: .5rem;
+		background: rgba(0,0,0,0.5);
+		color: #fff;
+		border-radius: 5px;
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate3d(-50%,-50%,0);
+	}
+</style>
+<template>
+	<div class="loading"
+		v-show="show"
+	>loading...</div>
+</template>
+
+<script>
+	export default {
+		props: {
+			show: false
+		}
+	}
+</script>
\ No newline at end of file

src/components/status/index.vue

+<style lang="sass">
+	.shownotify-transition {
+		transition: all .3s ease;
+	}
+
+	.shownotify-enter {
+		opacity: 1;
+	}
+
+	.shownotify-leave {
+	  opacity: 0;
+	}
+	.status {
+		margin-left: 2.5rem;
+	}
+	.notify {
+		background: rgba(241, 210, 76, 0.5);
+		padding: 1rem;
+	}
+</style>
+<template>
+	<div class="box" v-if="ns.length" transition="shownotify"> 
+		<p class="notify" v-on:click="toggle">{{msg}}</p>
+		<ul v-show="show" class="status">
+			<li v-for="v in ns" track-by="$index">
+				<a href="" v-on:click.prevent.stop="preReply(v.from,$index)">{{v.from}}说：{{v.msg}}</a>
+			</li>
+		</ul>
+	</div>
+	<p v-else>
+		暂无私信
+	</p>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				ns: [
+					{from: 'doge',msg: ':-)'},
+					{from: '新八',msg: '66666666#￥#%##'}
+				],
+				show: false
+			}
+		},
+		ready() {
+		},
+		computed: {
+			msg() {
+				var status
+				if(this.show){
+					status = '隐藏'
+				}else{
+					status = '展开'
+				}
+				return status + this.ns.length + '个新私信'
+			}
+		},
+		events: {
+			repDone: function(who,index){
+				this.ns.splice(index,1)
+			}
+		},
+		methods: {
+			toggle() {
+				this.show = !this.show
+			},
+			preReply(who,$index) {
+				this.$dispatch('showRep',who,$index)
+			}
+		}
+	}
+</script>
\ No newline at end of file

src/components/user/index.vue

+<style lang="sass" scoped>
+	.user {
+		width: 40%;
+		margin: 0 auto;
+		text-align: center;
+	}
+	.v-link-active {
+		background: #fff;
+		color: #3F51B5;
+	}
+	nav {
+		display: flex;
+		a {
+			font-size: .8rem;
+		}
+	}
+	nav a {
+		flex: 1;
+		text-align: center;
+		margin: 0 .3rem;
+		padding: .3rem;
+		background: #fff;
+		border: 1px solid #dedede;
+		border-bottom: none;
+		background: #DEDEDE;
+		color: #555;
+		&:first-child {
+			margin-left: 0;
+		}
+		&:last-child {
+			margin-right: 0;
+		}
+	}
+	section {
+		padding: 3rem;
+		font-size: 1.3rem;
+		color: #777;
+		background: #fff;
+		border: 1px solid #dedede;
+		border-top: none;
+	}
+</style>
+<template>
+		<div class="user">
+			<img src="./avator.jpeg" alt="">
+			<p>otarim</p>
+		</div>
+		<nav>
+	 		<a href="" v-link="{path: '/u/recive'}">我收到的@</a>
+	 		<a href="" v-link="{path: '/u/send'}">我的回复</a>
+	 		<a href="" v-link="{path: '/u/msg'}">我的消息</a>
+	 	</nav>
+		<section>
+			<router-view></router-view>
+		</section>
+</template>
+<script>
+	export default {
+		ready() {
+			this.$dispatch('title','个人中心')
+		}
+	}
+</script>
\ No newline at end of file

src/components/user/msg/index.vue

+ <template>
+ 	我的消息
+ </template>
\ No newline at end of file

src/components/user/recive/index.vue

+ <template>
+ 	我收到的@
+ </template>
\ No newline at end of file

src/components/user/send/index.vue

+ <template>
+ 	我的回复
+ </template>
\ No newline at end of file

src/directives/scrolling/index.vue

+<script>
+	export default {
+		params: ['callback'],
+		bind() {
+			var self = this
+			this.cb = function(){
+				var H = this.scrollHeight,
+          t = this.scrollTop,
+          h = this.offsetHeight
+        if (t + h >= H) {
+          self.params.callback && self.params.callback()
+        }
+			}
+			this.el.addEventListener('scroll',this.cb,false)
+		},
+		unbind() {
+			this.el.removeEventListener('scroll',this.cb,false)
+			this.cb = null
+		}
+	}
+</script>
\ No newline at end of file

src/index.js

+var Vue = require('Vue'),
+	r = require('./r')
+require('../bower_components/ota.css/ota.css')
+require('./index.scss')
+
+var App = Vue.extend({
+	data() {
+			return {
+				title: ''
+			}
+		},
+		ready() {
+			this.$on('title', function(t) {
+				this.title = t
+			})
+		}
+})
+
+Vue.directive('scrolling', require('./directives/scrolling/'))
+
+document.addEventListener('DOMContentLoaded', function() {
+	r.start(App, '#app')
+})
+
+// $on,$emit,$disparth,$broadcast
\ No newline at end of file

src/index.scss

+html,body {
+	height: 100%;
+}
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+a:active,a:hover {
+	text-decoration: none;
+}
+.app {
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	height: 100%;
+	background: #f0f0f0;
+	> header {
+		text-align: center;
+		h1 {
+			color: #fff;
+			font-size: 1.6rem;
+		}
+		background: #444;
+	}
+	> section {
+		flex: 10;
+		position: relative;
+		padding: 1rem;
+	}
+	> nav {
+		display: flex;
+		height: 2.5rem;
+		line-height: 2.5rem;
+		color: #333;
+		background: #fff;
+		border-top: 1px solid #dedede;
+		.v-link-active {
+			color: #3F51B5;
+		}
+		a {
+			flex: 1;
+			color: #555;
+			text-align: center;
+		}
+	}
+}
+.b {
+  background: #fff;
+  padding: 10px;
+  margin-bottom: 10px;
+  border: 1px solid #dedede;
+}
\ No newline at end of file

src/r.js

+var Vue = require('Vue')
+var VueRouter = require('vue-router')
+
+Vue.use(VueRouter)
+
+var r = module.exports = new VueRouter({
+	hashbang: false
+})
+
+r.map({
+	'/home': {
+		name: 'home',
+		component: require('components/home/')
+	},
+	'/posts': {
+		name: 'posts',
+		component: require('components/posts')
+	},
+	'/post/:id/': {
+		name: 'post',
+		component: require('components/post')
+	},
+	'/u': {
+		name: 'u',
+		component: require('components/user'),
+		subRoutes: {
+			'recive': {
+				name: 'recive',
+				component: require('components/user/recive')
+			},
+			'msg': {
+				name: 'msg',
+				component: require('components/user/msg')
+			},
+			'send': {
+				name: 'send',
+				component: require('components/user/send')
+			}
+		}
+	}
+})
+
+r.alias({
+	'/u': '/u/recive',
+	'/': '/home'
+})
+
+r.redirect({
+	'*': '/home',
+})
+
+r.beforeEach(function(transition) {
+	// transition.next()
+	console.log(transition.to, transition.from)
+	transition.next()
+})
\ No newline at end of file

src/store/index.js

+module.exports = {
+	getPosts() {
+		return new Promise(function(resolve, reject) {
+			setTimeout(function() {
+				resolve([{
+					title: '文章1',
+					content: '文章内容 a'
+				}, {
+					title: '文章2',
+					content: '文章内容 a'
+				}, {
+					title: '文章3',
+					content: '文章内容 a'
+				}, {
+					title: '文章4',
+					content: '文章内容 a'
+				}, {
+					title: '文章5',
+					content: '文章内容 a'
+				}, {
+					title: '文章6',
+					content: '文章内容 a'
+				}, {
+					title: '文章7',
+					content: '文章内容 a'
+				}, {
+					title: '文章8',
+					content: '文章内容 a'
+				}])
+			}, 1000)
+		})
+	}
+}
\ No newline at end of file

vue.md

+#vue
+
+[http://vuejs.org/](http://vuejs.org/)
+
+**hello world**
+
+    <div id="app">
+      {{ message }}
+    </div>
+
+    new Vue({
+      el: '#app',
+      data: {
+        message: 'Hello Vue.js!'
+      }
+    })
+
+**事件**
+
+    v-on:click.stop.prevent="show($event)"
+    v-on:keyup.enter="submit"
+
+**组件**
+
+0. 注册组件
+
+    var MyComponent = Vue.extend({
+      template: '<div>A custom component!</div>'
+    })
+
+    // 注册
+    Vue.component('my-component', MyComponent)
+
+    var Child = Vue.extend({ /* ... */ })
+
+    var Parent = Vue.extend({
+      template: '...',
+      components: {
+        // <my-component> 只能用在父组件模板内
+        'my-component': Child
+      }
+    })
+
+    // 局部注册也可以这么做
+    var Parent = Vue.extend({
+      components: {
+        'my-component': {
+          template: '<div>A custom component!</div>'
+        }
+      }
+    })
+
+
+1. 生命周期
+    created,ready,destroyed
+
+2. 通信
+    props(动态 props),event,v-ref(子组件)
+
+**指令**
+
+    bind,unbind,update,params(类似props)
+
+**mixins**
+
+    // 定义一个混合对象
+    var myMixin = {
+      created: function () {
+        this.hello()
+      },
+      methods: {
+        hello: function () {
+          console.log('hello from mixin!')
+        }
+      }
+    }
+
+    // 定义一个组件，使用这个混合对象
+    var Component = Vue.extend({
+      mixins: [myMixin]
+    })
+
+    var component = new Component() // -> "hello from mixin!"
+
+**一些地方**
+
+1. template 返回一个根节点 (this.$el ===> #text)
+2. track-by 实现 dom 复用
+
+
+#vue-router
+
+[http://vuejs.github.io/vue-router/zh-cn/](http://vuejs.github.io/vue-router/zh-cn/)
+
+**问题**
+
+    v-link="name" path 跳转问题
+
+#webpack
+    
+vue-loader: [https://github.com/vuejs/vue-loader](https://github.com/vuejs/vue-loader)
+
+**各种 loader**
\ No newline at end of file

webpack.config.js

+var path = require('path'),
+	webpack = require('webpack'),
+	LiveReloadPlugin = require('webpack-livereload-plugin'),
+	ExtractTextPlugin = require('extract-text-webpack-plugin')
+
+
+module.exports = {
+	entry: {
+		app: './src/index.js'
+	},
+	output: {
+		path: path.resolve('./dist'),
+		publicPath: 'dist/', //static path
+		filename: '[name].js'
+	},
+	module: {
+		// 加载器
+		loaders: [
+			// 使用Babel转换ES6，排除node_modules目录下的js
+			{
+				test: /\.js$/,
+				loader: 'babel',
+				exclude: /node_modules/
+			}, {
+				test: /\.css$/,
+				loader: 'style!css!autoprefixer'
+			}, {
+				test: /\.(sass|scss)/,
+				loader: 'style!css!autoprefixer!sass'
+			}, {
+				test: /\.(gif|png|jpe?g)$/,
+				loaders: ['url-loader?limit=1000&name=static/imgs/[name].[ext]',
+					'image-webpack?{progressive:true, optimizationLevel: 7, interlaced: false, pngquant:{quality: "65-90", speed: 4}}'
+				]
+			}, {
+				test: /\.(html|tpl)$/,
+				loader: 'html-loader'
+			}, {
+				test: /\.vue$/,
+				loader: 'vue'
+			}
+		]
+	},
+	vue: {
+		loaders: {
+			css: ExtractTextPlugin.extract("css"),
+			sass: ExtractTextPlugin.extract("css!sass"),
+			scss: ExtractTextPlugin.extract("css!sass")
+		}
+	},
+	babel: {
+		// enable stage 0 transforms.
+		// make sure to install babel-presets-stage-0
+		presets: ['es2016-node5']
+	},
+	resolve: {
+		// require时省略的扩展名，如：require('module') 不需要module.js
+		extensions: ['', '.js', '.vue'],
+		// // 别名
+		alias: {
+			components: path.join(__dirname, './src/components'),
+			store: path.join(__dirname, './src/store')
+		}
+	},
+	plugins: [
+		// new LiveReloadPlugin({
+		// 	// appendScriptTag: true
+		// }),
+		// new webpack.optimize.UglifyJsPlugin({
+		// 	compress: {
+		// 		warnings: false
+		// 	}
+		// })
+		new ExtractTextPlugin("[name].css")
+	]
+}
\ No newline at end of file