Vue 2.0 起步(2) 组件及 vue-router实例

参考：
Vue 2.0 起步(1) 脚手架工具 vue-cli + Webstorm 2016 + webpack
vue-router官方文档
如果你是克隆git里源码的，注意工程目录名是vue-tutorial/，步骤：http://www.jianshu.com/p/b3c76962e3d4

下面引自官网：
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。它提供了一种抽象，让我们可以用独立可复用的小组件来构建大型应用。如果我们考虑到这点，几乎任意类型的应用的界面都可以抽象为一个组件树：

components.png

公众号平常是在微信里阅读，经常会给微信消息打断，所以希望有一个不被打扰，能个人定制的安静阅读环境。

最终完成是这样子的：

简读Vue2.PNG

1. 划分功能区域 （本篇）

2. 对应每个区域，创建相应的组件（component） （本篇）

3. vue-router 管理各个组件的动态加载 （本篇）

4. 管理数据流vuex和LocalStorage 起步（3）

5. 与后台服务器端（Flask）的交互 - 用户注册及登录 起步（4）

6. 与后台服务器端（Flask）的交互 - 数据持久化 起步（5）

一个吸引人的应用，漂亮的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】 -- NavBar
右侧是状态栏【2】 -- SideBar
左侧是内容展示【3】 -- Content (由路由决定)

vue2-2.PNG

如果安装了 vue-devtools，会在Chrome里清晰地显示各个组件的关系。

现在，我们在 App.vue里定义整体框架：里面包含 Navbar, Sidebar和一个动态路由View。
看不懂没关系，下面 vue-router马上讲到。现在你可以把这一行认为是一个组件 。

/src/App.vue

整体框架搭好了，我们现在来创建组件：
【1 - NavBar】不需要单独组件，已经直接写入 App.vue。
【2 - SideBar】需要创建组件，而且是一直固定显示的，所以，我们已经在 App.vue里引用了这个组件。(下面写成Siderbar了，多了个“r”，谢谢xmisspuff，已改)

/src/components/Sidebar.vue

    .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%;
    }

【3 - Content】 是变化的，我们希望打开首页时，左边显示主页（Home），这是一个新组件：

/src/components/Home.vue

路由在 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

    .form-inline .wide {        width: 80%;
    }    .imgbox {        width: 100px;        height: 120px;        overflow: hidden;
    }    .imgbox img{        max-width: 100px;        
    }    .s1 {        margin-right: 20px;
    }    .s2 {        margin-left: 20px;
    }

现在试一下，是不是已经看到漂亮的主页了？再点一下右上角搜索按钮，搜索结果页面也会显示了，注意观察浏览器地址的变化：

search.vue.PNG

目前，我们的应用里，还只是一些假数据。

Vue 2.0 起步(3) 管理数据流 vuex和LocalStorage实例

参考：Vue 2.0 构建单页应用最佳实战，感谢原作者

http://www.jianshu.com/p/ab778fde3b99

作者：非梦nj
链接：https://www.jianshu.com/p/63e7f9d61706