參考：
Vue 2.0 起步(1) 腳手架工具 vue-cli + Webstorm 2016 + webpack
vue-router官方文檔
如果你是克隆git里源碼的佳谦，注意工程目錄名是vue-tutorial/，步驟：http://www.reibang.com/p/b3c76962e3d4
Github: https://github.com/kevinqqnj/vue-tutorial
請使用新的template: https://github.com/kevinqqnj/flask-template-advanced
什么是組件？
下面引自官網：
組件（Component）是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素寞秃，封裝可重用的代碼宙帝。它提供了一種抽象斯嚎，讓我們可以用獨立可復用的小組件來構建大型應用饭尝。如果我們考慮到這點肯腕，幾乎任意類型的應用的界面都可以抽象為一個組件樹：
目標：搭架一個SPA應用 - “簡讀 - 微信公眾號RSS”
公眾號平常是在微信里閱讀，經常會給微信消息打斷钥平，所以希望有一個不被打擾乎芳，能個人定制的安靜閱讀環(huán)境。
最終完成是這樣子的：
開發(fā)步驟：
- 劃分功能區(qū)域 （本篇）
- 對應每個區(qū)域帖池，創(chuàng)建相應的組件（component） （本篇）
- vue-router 管理各個組件的動態(tài)加載 （本篇）
- 管理數(shù)據(jù)流vuex和LocalStorage 起步（3）
- 與后臺服務器端（Flask）的交互 - 用戶注冊及登錄 起步（4）
- 與后臺服務器端（Flask）的交互 - 數(shù)據(jù)持久化 起步（5）
UI選擇
一個吸引人的應用奈惑，漂亮的UI是必須滴。
# 安裝
cnpm install bootstrap@4.0.0-alpha.5 -S
cnpm install font-awesome -S
1. 劃分功能區(qū)域
頂部是導航條【1】 -- NavBar
右側是狀態(tài)欄【2】 -- SideBar
左側是內容展示【3】 -- Content (由路由決定)
如果安裝了 vue-devtools，會在Chrome里清晰地顯示各個組件的關系彤叉。
現(xiàn)在庶柿，我們在 App.vue里定義整體框架：里面包含 Navbar, Sidebar和一個動態(tài)路由View。
<router-view></router-view> 看不懂沒關系秽浇，下面 vue-router馬上講到「÷現(xiàn)在你可以把這一行認為是一個組件 <home></home>。
/src/App.vue
<template>
<div id="app">
<div class="container">
<nav class="navbar navbar-dark bg-inverse navbar-fixed-top">
<router-link to="/" class="navbar-brand text-success"> 簡讀</router-link>
<ul class="nav navbar-nav">
<li class="nav-item">
<router-link to="/home" class="nav-link"><i class="fa fa-home"></i> Home</router-link>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-flag"></i> Hot</a>
</li>
</ul>
<form class="form-inline float-xs-right">
<input class="form-control" type="text" placeholder="搜索公眾號/文章">
<router-link to="/search"><i class="fa fa-search btn btn-outline-success" @click=""></i></router-link>
<i class="fa fa-user-o btn btn-outline-success"></i>
</form>
</nav>
</div>
<div class="container" style="margin-top: 80px">
<div class="row">
<div class="col-xs-12 col-md-3 push-md-9 col-xl-3 push-xl-9">
<sidebar></sidebar>
</div>
<div class="col-xs-12 col-md-9 pull-md-3 col-xl-9 pull-xl-3">
<router-view></router-view>
</div>
</div>
</div>
</div>
</template>
<script>
import Siderbar from './components/Sidebar.vue'
export default {
components: {
'sidebar': Siderbar
}
}
</script>
2. 創(chuàng)建組件
整體框架搭好了柬焕，我們現(xiàn)在來創(chuàng)建組件：
【1 - NavBar】不需要單獨組件审残，已經直接寫入 App.vue。
【2 - SideBar】需要創(chuàng)建組件斑举，而且是一直固定顯示的搅轿，所以，我們已經在 App.vue里引用了這個組件富玷。(下面寫成Siderbar了璧坟，多了個“r”，謝謝xmisspuff赎懦，已改)
/src/components/Sidebar.vue
<template>
<div class="card">
<div class="card-header" align="center">
<img src="http://avatar.csdn.net/1/E/E/1_kevin_qq.jpg"
class="avatar img-circle img-responsive" />
<p><strong> 非夢</strong></p>
<p class="card-title">1天前 閱讀</p>
</div>
<div class="card-block">
<p>
<img src="http://wx.qlogo.cn/mmhead/Q3auHgzwzM6FDWDyWSNm2AFBwFV6SFMXa20hjbFlWOyGYFQqrryIPw/0"
class="mpavatar img-circle img-responsive" />
<span class="tag tag-danger tag-pill float-xs-right">12</span>
創(chuàng)意科技生活
</p>
<p>
<img src="http://wx.qlogo.cn/mmhead/Q3auHgzwzM5VP8rbv4fBibDLRoibcezeC7aMx2qs4hfUWtw8Cp6PDZ7Q/0"
class="mpavatar img-circle img-responsive" />
<span class="tag tag-danger tag-pill float-xs-right">3</span>
科技每日推送
</p>
</div>
</div>
</template>
<style>
.avatar {
height: 75px;
margin: 0 auto;
margin-top: 10px;
margin-bottom: 10px;
}
.mpavatar {
height: 30px;
margin: 0 auto;
margin-top: 2px;
margin-bottom: 2px;
}
.img-circle {
border-radius: 50%;
}
</style>
【3 - Content】 是變化的雀鹃，我們希望打開首頁時，左邊顯示主頁（Home）铲敛，這是一個新組件：
/src/components/Home.vue
<template>
<div>
<div class="jumbotron">
<h1 class="display-3 text-success">簡 讀</h1>
<p class="lead">微信公眾號簡單閱讀器 RSS</p>
<hr class="my-2">
<p>公眾號平常是在微信里閱讀褐澎，經常會給微信消息打斷。這里是一個不被打擾伐蒋、能個人定制的安靜閱讀環(huán)境工三。</p>
<p class="lead">
<a class="btn btn-outline-success btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
</div>
</template>
3. vue-router管理各個組件的動態(tài)加載
路由在 main.js里定義。vue-router負責管理：路由變化時先鱼，框架內哪一塊來動態(tài)展某個組件俭正。
進一步了解 vue-router，請查看 vue-router官方文檔
我們的規(guī)劃：
- 路由 / & /home --> 左邊頁面顯示歡迎 Home.vue
- 路由 /login --> 左邊頁面顯示登錄 Login.vue
- 路由 /mp_list --> 左邊頁面顯示所有關注公眾號清單 MpList.vue
- 路由 /mp_history --> 左邊頁面顯示某個公眾號歷史 MpHistory.vue
- 路由 /search --> 左邊頁面顯示搜索結果 Search.vue
下面焙畔，我們來添加 Home和 Search組件的路由掸读，它們都會由 vue-router在 App.vue中動態(tài)加載到左邊：
/src/main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import 'bootstrap/dist/css/bootstrap.css'
import 'font-awesome/css/font-awesome.css'
import Home from './components/Home'
import Search from './components/Search'
Vue.use(VueRouter)
const routes = [{
path: '/',
component: Home
},{
path: '/home',
component: Home
},{
path: '/search',
component: Search
}]
const router = new VueRouter( {
routes
})
new Vue({
router,
...App
}).$mount('#app')
Search組件，點擊搜索按鈕，這個組件會被動態(tài)掛載到左邊（原來Home組件位置）：
/src/components/Search.vue
<template>
<div class="card">
<div class="card-header" align="center">
<form class="form-inline">
<input class="form-control form-control-lg wide" type="text" placeholder="搜索公眾號/文章">
<i class="fa fa-search btn btn-lg btn-outline-success" @click=""></i>
</form>
</div>
<div class="card-block">
<div class="media">
<div class="media-left imgbox">
<a class="" href="#">
<img class="media-object rounded"
src="http://dl.bizhi.sogou.com/images/2014/04/22/587880.jpg">
</a></div>
<div class="media-body">
<h4>這個導演的新片儿惫，每一部我必二刷</h4>
<p class="text-muted" style="margin-bottom: 0px;">
11月的時候澡罚，魚叔采訪了自己的偶像——蒂姆·波頓。并有機會提前看到了他的新片肾请，然后寫了一篇推文留搔。今天電影上映，魚叔去電影院二刷铛铁。這一次隔显，又
</p>
<p><small class="text-muted s1">
<span> <i class="fa fa-star-o fa-lg float-xs-right text-danger"></i></span>
<i class="fa fa-eye"></i> 2348 </small>
<small class="text-muted"> 獨立魚電影</small>
<small class="text-muted s2"> 1小時前</small>
</p>
</div>
</div>
<div class="media">
<div class="media-left imgbox">
<a class="" href="#">
<img class="media-object rounded "
src="http://wx.qlogo.cn/mmhead/Q3auHgzwzM6FDWDyWSNm2AFBwFV6SFMXa20hjbFlWOyGYFQqrryIPw/0">
</a></div>
<div class="media-body">
<h4>現(xiàn)在的段子，不動腦子根本就看不懂</h4>
<p class="text-muted" style="margin-bottom: 0px;">
周末饵逐，姑媽讓我?guī)兔Ρ碚疹?歲的表弟括眠，晚上我給他洗澡的時候，女票打來電話倍权。因為手不方便拿掷豺，就開了免提，她問:在做什么呢账锹？我說...
</p>
<p><small class="text-muted s1">
<span> <i class="fa fa-star-o fa-lg float-xs-right text-danger"></i></span>
<i class="fa fa-eye"></i> 1181 </small>
<small class="text-muted s1"> 鳳凰網 </small>
<small class="text-muted s2"> 3小時前</small>
</p>
</div>
</div>
</div>
</div>
</template>
<style>
.form-inline .wide {
width: 80%;
}
.imgbox {
width: 100px;
height: 120px;
overflow: hidden;
}
.imgbox img{
max-width: 100px;
/*max-height: 120px;*/
}
.s1 {
margin-right: 20px;
}
.s2 {
margin-left: 20px;
}
</style>
現(xiàn)在試一下萌业，是不是已經看到漂亮的主頁了？再點一下右上角搜索按鈕奸柬，搜索結果頁面也會顯示了生年，注意觀察瀏覽器地址的變化：
目前，我們的應用里廓奕，還只是一些假數(shù)據(jù)抱婉。
下一篇，我們會討論如何采集和管理數(shù)據(jù)
Vue 2.0 起步(3) 管理數(shù)據(jù)流 vuex和LocalStorage實例
參考：Vue 2.0 構建單頁應用最佳實戰(zhàn)桌粉，感謝原作者
