# vue-juejin **Repository Path**: ddupup/vue-juejin ## Basic Information - **Project Name**: vue-juejin - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2021-05-18 - **Last Updated**: 2021-05-18 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 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, [点击可查看源码](https://github.com/sanfengliao/vue-juejin),希望各位掘友大大给个star ### 效果图 (前面一大波长gif来袭) (如果图片显示不出,请访问[原文链接](https://juejin.im/post/5e98441df265da47ef2f3720)) * 首页 ![首页效果](https://user-gold-cdn.xitu.io/2020/4/16/171838443f17671b?w=360&h=780&f=gif&s=4888738) * 沸点 ![沸点列表](https://user-gold-cdn.xitu.io/2020/4/16/17183850b393a4d3?w=360&h=780&f=gif&s=1248458) * 搜索 ![](https://user-gold-cdn.xitu.io/2020/4/16/171838680ca1aff4?w=360&h=780&f=gif&s=950128) * 小册 ![小册页面](https://user-gold-cdn.xitu.io/2020/4/16/1718385ef5f13720?w=360&h=780&f=gif&s=3202154) * 我的 ![我的](https://user-gold-cdn.xitu.io/2020/4/16/1718386fa6af9727?w=360&h=780&f=gif&s=1404012) * 用户主页 ![用户主页](https://user-gold-cdn.xitu.io/2020/4/16/1718387844061e8c?w=360&h=780&f=gif&s=1946699) * 话题主页 ![话题主页](https://user-gold-cdn.xitu.io/2020/4/16/17183890948738fb?w=360&h=780&f=gif&s=381336) * 文章详情 ![文章详情](https://user-gold-cdn.xitu.io/2020/4/16/1718389b09f8d27b?w=360&h=780&f=gif&s=1319213) * 沸点详情 ![沸点详情](https://user-gold-cdn.xitu.io/2020/4/16/171838a50e7fe8a5?w=360&h=780&f=gif&s=1237673) ### 完成度 本来以为仿照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下来跑一遍试试吧 [点击此下载源码](https://github.com/sanfengliao/vue-juejin.git) #### 交互完成度 评论、留言、关注、添加到收藏集、发表沸点等暂时均没有实现,因为 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. 后续会不停的完善该项目,把一些能够开发的功能都开发出来,希望各位朋友们多多支持。