1 cnode社区的基本构架

组件：

• Header 头部
• PosltList 列表
• Article 文章的详情页
• SlideBar 侧边栏
• UserInfo 用户个人信息
• Psgination 分页组件

2 从0开始实战

2.1 Header组件

2.2 PostList组件

API接口：https://cnodejs.org/api/v1/topics 获取帖子列表
limit ，page
拿到的参数分析
头像：author.avatar_url
回复量/浏览量 ：reply_count/visit_count
帖子的标题：title
需要使用到过滤器：
时间：last_reply_at
帖子分类：

• top: 代表是否置顶
• good: 代表是否精华
• tab: 是表示除了置顶和精华之外的其余分区
  • share: 分享
  • ­ask: 问答
  • ­job: 招聘

---

2.3 Article组件

API https://cnodejs.org/api/v1/topic/ + 帖子ID

2.4 USerinfo组件

API https://cnodejs.org/api/v1/user/+ username
http://localhost:8081/#/userinfo/aojiaotage–用户列表页
=》》》
http://localhost:8081/#/topic/5afe26730a36e5312d6ed257&author=aojiaotage
http://localhost:8081/#/topic/5afe26730a36e5312d6ed257&author=aojiaotage
—­》》》
http://localhost:8081/#/topic/57ff46f5fdf3bd3d651185bf&author=aojiaotage

---

最后提交到GitHub上
第一步：

npm run build

第二步：

• 在vue.config.js 中设置正确的 publicPath。

• 如果打算将项目部署到 https://<USERNAME>.github.io/ 上, publicPath 将默认被设为 "/"，你可以忽略这个参数。

• 如果打算将项目部署到 https://<USERNAME>.github.io/<REPO>/ 上 (即仓库地址为 https://github.com/<USERNAME>/<REPO>)，可将 publicPath 设为 "/<REPO>/"。举个例子，如果仓库名字为“my-project”，那么 vue.config.js的内容应如下所示：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-project/'
    : '/'
}