项目组件结构
Header——头部
PostList——帖子列表
Article——文章详情页
SlideBar——侧边栏
UserInfo——用户信息
Psgination——分页组件
Header组件
使用VueCli将项目搭建好以后，我们开始制作本项目的Header组件。
在template中写入我们的页面结构。分别是一张logo图片以及被无序列表包含的链接集合。
添加一些CSS，我们使用float布局实现li的横向排列。
Header效果如下
PostList组件
做完Header我们着手开始做PostList组件。这个部分是本项目比较重要的部分。
先大致规划页面结构：在拉取list信息成功之前会显示一个loading的gif图片。剩下的则是拉取到的List部分。
通过v-if来对loading的展示进行控制
后续要拿到帖子的列表这需要用到官方的API
API接口：cnodejs.org/api/v1/topi… 获取帖子列表
limit page
拿到的参数分析
头像：author.avatar_url
回复量/浏览量 ：reply_count/visit_count
帖子的标题：title
需要使用到过滤器：
时间：last_reply_at
帖子分类：top: 代表是否置顶 good: 代表是否精华 tab 是表示除了置顶和精华之外的其余分区
share 分享
ask 问答
job 招聘
由于我们是向CNode社区获取数据所以需要用到axios插件。并且在main.js中进行引入且挂载在vue的prototype上。
回到PostList组件，我们写一个获取数据的方法，并且在挂载之前执行。
我们需要把获取的数据收集起来，我们在data中声明一个数组代表页面数据。
显示用户头像
适当加了一些样式
添加回复数等细节
过滤器
时间过滤器：
文字过滤：
在最终回复时间处使用过滤器：
动态绑定class
动态绑定class实现不同的帖子分类有不同的样式，并且使用过滤器显示帖子种类。
Article组件
API cnodejs.org/api/v1/topi… + 帖子ID
RouterLink的配置
这个组件中我们要实现点击postLIst组件的标题实现跳转的功能，所以我们要设置routerlink。
设置根路径已经要用的article路径。
配置routerlink的查询参数和名称。
使用routerview实现显示。
