Vue仿照掘金客户端App开发Web版掘金App

运行

git clone https://github.com/sanfengliao/vue-juejin.git

cd vue-juejin

npm install

# serve with hot reload at localhost:8080
npm run serve

# build juejin application for production
npm run build

正文

介绍

该项目是~~抄袭~~仿照掘金客户端使用Vue开发的WebApp。里面所有的API均来自官方Android。页面基本上和掘金App差不多，不过由于里面的一些图片本菜使用的是阿里的iconfont，因此会和掘金App上面的图片有点不一样，但是整体的功能和掘金App还是差不多的。

该项目源码已经开源在~~gayhub~~github, 点击可查看源码，希望各位掘友大大给个star

效果图

(前面一大波长gif来袭)

(如果图片显示不出，请访问原文链接)

• 首页

  

• 沸点

  

• 搜索

  

• 小册

  

• 我的

  

• 用户主页

  

• 话题主页

  

• 文章详情

  

• 沸点详情

  

完成度

本来以为仿照App实现的话应该很快就可以全部昨晚，可做起来才发现APP 里面的东西实在是不少(有一些是本菜实在做不了,比如支付)，包括页面和交互，要完全照抄实现确实需要一些时间和精力，UI 之类的都是简单测量+肉眼调试实现的，下面列出页面和交互的完成度，这里应该只是列出了绝大部分。未列出、未实现的后续会根据时间、精力来实现。 实际完成度请以代码为主

• [x] 启动页 不做
• [x] 登录、未登录跳转和页面数据刷新(逻辑还不够眼睛)
• [x] 上拉加载、下拉锁芯
• [x] HOME 完成
  • [x] TAB切换
  • [x] TAB编辑
  • [x] 关注的作者发布的文章
  • [x] 点赞
• [x] 沸点
  • [x] TAB切换
  • [x] TAB编辑
  • [x] 关注的作者发布的动态
  • [x] 点赞
  • [x] 沸点详情
• [x] 搜索 完成
  • [x] 按照综合、文章、用户、标签搜索
• [ ] 小册
  • [x] 小册列表
  • [x] 小册详情
  • [x] 小册章节详情
  • [ ] 购买小册 (臣妾做不到啊)
• [ ] 我的
  • [x] 个人主页
    • [ ] 编辑
    • [x] 活动
    • [x] 原创文章
    • [x] 沸点
    • [x] 收藏集
      • [x] 收藏集详情页
    • [x] 喜欢的文章
    • [x] 关注的标签
      • [ ] 标签详情页
  • [ ] 消息中心
  • [x] 赞过的文章和沸点
  • [x] 收藏集
    • [x] 创建的
    • [x] 已关注的
  • [x] 已购小册 (不知道有没有问题)
  • [x] 阅读过的文章
  • [x] 标签管理
    • [x] 已关注标签
    • [x] 所有标签
      • [x] 推荐标签
      • [x] 所有标签
    • [x] 关注标签
  • [ ] 夜间模式
  • [ ] 设置 完成一些
    • [x] 修改密码
  • [ ] 登录页
  • [x] 作者榜
    • [x] 用户主页
      • [x] 关注
      • [x] 活动
      • [x] 原创文章
      • [x] 沸点
      • [x] 收藏集
        • [x] 收藏集详情页
          • [x] 关注收藏集
          • [x] 收藏集文章列表
      • [x] 喜欢的文章
      • [x] 关注的标签
        • [ ] 标签详情页
  • [ ] 话题榜
    • [x] 更多话题
    • [ ] 已关注话题
    • [x] 话题详情
      • [x] 关注话
  • [ ] 文章详情页
    • [x] 文章内容
    • [x] 显示评论
    • [x] 文章作者其他系列文章
    • [x] 关注作者
    • [ ] 收藏文章、分享文章
    • [ ] 评论
    • [ ] 其他
  • [ ] 沸点详情页
    • [x] 文章内容
    • [x] 显示评论
    • [x] 推荐沸点
    • [x] 关注作者
    • [ ] 分享沸点
    • [ ] 评论
    • [ ] 其他
• [ ] ... 应该还有一些完成的没有列举出来，大家clone下来跑一遍试试吧 点击此下载源码

交互完成度

评论、留言、关注、添加到收藏集、发表沸点等暂时均没有实现，因为 APP 里面的东西实在是不少......

• [ ] 评论
• [ ] 留言
• [ ] 未完待续部分...

后续

1. 话说掘金的 API 域名（二级）真是多啊，使用webpack-dev-server的proxy配置代理都让node报possible EventEmiter memory leak deteceted的警告了。
2. 富文本部分是直接拷贝掘金web官网的富文本样式
3. 有些页面的显示还不够丝滑，后续需要改进
4. 认真的看效果图的话，可以看出某些页面还是有一些bug的，
5. 关于页面切换动画似乎还不够连贯，不知道是代码的问题(绝对是代码的问题)，还是浏览器的问题
6. 登录的token好像有一些问题，在两个app登录同一个账号不会报token异常，但是在该项目中在两个浏览器中登录会出问题。
7. html节点的font-size设置太小了，因此有些忘记设计font-size的元素可能会显示不出文字。
8. 后续会不停的完善该项目，把一些能够开发的功能都开发出来，希望各位朋友们多多支持。