本文共 3805 字，大约阅读时间需要 12 分钟。

参考：

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

components.png

目标：搭架一个SPA应用 - “简读 - 微信公众号RSS”

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

最终完成是这样子的：

简读Vue2.PNG

开发步骤：

1. 划分功能区域 
2. 对应每个区域，创建相应的组件（component） 
3. vue-router 管理各个组件的动态加载 
4. 管理数据流vuex和LocalStorage 
5. 与后台服务器端（Flask）的交互 - 用户注册及登录 
6. 与后台服务器端（Flask）的交互 - 数据持久化 

UI选择

一个吸引人的应用，漂亮的UI是必须滴。

• 桌面应用，适合入门的是 ，最新是 4.0Alpha
• 手机端应用，推荐 Material UI对应于 Vue2.0的 ，或element。

# 安装cnpm install bootstrap@4.0.0-alpha.5 -Scnpm 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

2. 创建组件

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

/src/components/Siderbar.vue

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

/src/components/Home.vue

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

路由在 main.js里定义。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

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

search.vue.PNG

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

下一篇，我们会讨论如何采集和管理数据

参考：，感谢原作者

转载地址：http://lzeni.baihongyu.com/