独立的文章预览组件

简介

在本章中，我们将动态获取文章数据并在首页上显示。我们将使用 Vuex 机制来实现这一功能。同时，我们还将实现首页的动态标签页选择功能。最后，我们将通过实现个人资料页面来结束本课程。

现在，让我们开始吧！

ArticlePreview 组件

在获取文章数据之前，我们需要先实现一个独立的组件。我们首先在 ./components 文件夹中创建一个名为 ArticlePreview.vue 的新组件文件。

在该文件中，我们可以使用之前在首页实现文章列表部分时所用的代码。ArticlePreview 组件的代码如下所示：

1
2<template>
3  <div class="article-preview">
4    <div class="article-meta">
5      <a href="profile.html"><img src="http://i.imgur.com/Qr71crq.jpg" /></a>
6      <div class="info">
7        <a href="" class="author">Kriss Kawa</a>
8        <span class="date">2月20日</span>
9      </div>
10      <button class="btn btn-outline-primary btn-sm pull-xs-right">
11        <i class="ion-heart"></i> 28
12      </button>
13    </div>
14    <a href="" class="preview-link">
15      <h1>如何构建稳健且动态的 React Native 应用</h1>
16      <p>了解 React Native 应用开发的基础知识</p>
17      <span>阅读更多...</span>
18    </a>
19  </div>
20</template>

接下来，我们需要将 ArticlePreview 组件导入到 Home.vue 文件中，代码如下：

1import ArticlePreview from '../components/ArticlePreview'

然后，我们需要在 components 对象中注册该组件，代码如下：

1
2export default {
3  name: "Home",
4  components: {
5    ArticlePreview
6  }
7};

最后，我们需要在模板中用该组件替换原有的文章部分代码：

1
2<div class="col-md-9">
3  <div class="feed-toggle">
4    <ul class="nav nav-pills outline-active">
5      <li class="nav-item">
6        <a class="nav-link disabled" href="">你的动态</a>
7      </li>
8      <li class="nav-item">
9        <a class="nav-link active" href="">全局动态</a>
10      </li>
11    </ul>
12  </div>
13
14  <ArticlePreview/>
15</div>

运行应用程序

运行后，我们将得到如下结果：