美文网首页
十二章 实战篇

十二章 实战篇

作者: kzc爱吃梨 | 来源:发表于2019-11-07 17:45 被阅读0次

1 cnode社区的基本构架

组件:

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

2 从0开始实战

2.1 Header组件

2.2 PostList组件

API接口:https://cnodejs.org/api/v1/topics 获取帖子列表
limitpage
拿到的参数分析
头像: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/'
    : '/'
}

相关文章

网友评论

      本文标题:十二章 实战篇

      本文链接:https://www.haomeiwen.com/subject/cebtbctx.html