Vue 2.0 起步(2) 組件及 vue-router實例 - 微信公眾號RSS


參考:
Vue 2.0 起步(1) 腳手架工具 vue-cli + Webstorm 2016 + webpack
vue-router官方文檔

什么是組件?

下面引自官網:
組件(Component)是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素,封裝可重用的代碼。它提供了一種抽象,讓我們可以用獨立可復用的小組件來構建大型應用。如果我們考慮到這點,幾乎任意類型的應用的界面都可以抽象為一個組件樹:


components.png

目標:搭架一個SPA應用 - “簡讀 - 微信公眾號RSS”

公眾號平常是在微信里閱讀,經常會給微信消息打斷,所以希望有一個不被打擾,能個人定制的安靜閱讀環境。

最終完成是這樣子的:


簡讀Vue2.PNG

開發步驟:

  1. 划分功能區域 (本篇)
  2. 對應每個區域,創建相應的組件(component) (本篇)
  3. vue-router 管理各個組件的動態加載 (本篇)
  4. 管理數據流vuex和LocalStorage 起步(3)
  5. 與后台服務器端(Flask)的交互 - 用戶注冊及登錄 起步(4)
  6. 與后台服務器端(Flask)的交互 - 數據持久化 起步(5)

UI選擇

一個吸引人的應用,漂亮的UI是必須滴。

  • 桌面應用,適合入門的是 Bootstrap,最新是 4.0Alpha
  • 手機端應用,推薦 Material UI對應於 Vue2.0的 Muse-UI,或element。
# 安裝
cnpm install bootstrap@4.0.0-alpha.5 -S
cnpm install font-awesome -S

1. 划分功能區域

頂部是導航條【1】 -- NavBar
右側是狀態欄【2】 -- SideBar
左側是內容展示【3】 -- Content (由路由決定)


vue2-2.PNG

如果安裝了 vue-devtools,會在Chrome里清晰地顯示各個組件的關系。

現在,我們在 App.vue里定義整體框架:里面包含 Navbar, Sidebar和一個動態路由View。

<router-view></router-view> 看不懂沒關系,下面 vue-router馬上講到。現在你可以把這一行認為是一個組件 <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. 創建組件

整體框架搭好了,我們現在來創建組件:
【1 - NavBar】不需要單獨組件,已經直接寫入 App.vue。
【2 - SideBar】需要創建組件,而且是一直固定顯示的,所以,我們已經在 App.vue里引用了這個組件。

/src/components/Siderbar.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>
                創意科技生活
            </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>公眾號平常是在微信里閱讀,經常會給微信消息打斷。這里是一個不被打擾、能個人定制的安靜閱讀環境。</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管理各個組件的動態加載

路由在 main.js里定義。vue-router負責管理:路由變化時,框架內哪一塊來動態展某個組件。

進一步了解 vue-router,請查看 vue-router官方文檔

我們的規划:

  • 路由 / & /home --> 左邊頁面顯示歡迎 Home.vue
  • 路由 /login --> 左邊頁面顯示登錄 Login.vue
  • 路由 /mp_list --> 左邊頁面顯示所有關注公眾號清單 MpList.vue
  • 路由 /mp_history --> 左邊頁面顯示某個公眾號歷史 MpHistory.vue
  • 路由 /search --> 左邊頁面顯示搜索結果 Search.vue

下面,我們來添加 Home和 Search組件的路由,它們都會由 vue-router在 App.vue中動態加載到左邊:

/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組件,點擊搜索按鈕,這個組件會被動態掛載到左邊(原來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>現在的段子,不動腦子根本就看不懂</h4>
                    <p class="text-muted" style="margin-bottom: 0px;">
                        周末,姑媽讓我幫忙表照顧5歲的表弟,晚上我給他洗澡的時候,女票打來電話。因為手不方便拿,就開了免提,她問:在做什么呢?我說...
                    </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>

現在試一下,是不是已經看到漂亮的主頁了?再點一下右上角搜索按鈕,搜索結果頁面也會顯示了,注意觀察瀏覽器地址的變化:


search.vue.PNG

目前,我們的應用里,還只是一些假數據。

下一篇,我們會討論如何采集和管理數據

Vue 2.0 起步(3) 管理數據流 vuex和LocalStorage實例

參考:Vue 2.0 構建單頁應用最佳實戰,感謝原作者


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com