Vue開發掘金WebApp(仿掘金App)

本菜在掘金的處女做，但願各位大佬多多包涵

先來一波彩虹屁

掘金是我見過幾個技術博客網站中最好用的的一個，相比於某csdn和某簡書真的是良心太多，頁面簡潔顏值高，廣告少乾貨多，不像某csdn，廣告隨處可見，水貨文章特別多，文章質量良莠不齊。掘金就不同了，沒有兩把刷子都很差意思發表文章(本菜屬於臉皮特別厚的，一把刷子都沒有，但厚着臉皮發表一篇水貨文章)。所以爲了表達本菜對掘金的敬意和支持，本菜使用仿(chao)造(xi)掘金手機客戶端使用Vue開發了一個掘金WebApp，但願各位掘友大佬們提點提點。

正文

介紹

該項目是抄襲仿照掘金客戶端使用Vue開發的WebApp。裏面全部的API均來自官方Android。頁面基本上和掘金App差很少，不過因爲裏面的一些圖片本菜使用的是阿里的iconfont，所以會和掘金App上面的圖片有點不同，可是總體的功能和掘金App仍是差很少的。

該項目源碼已經開源在gayhubgithub, 點擊可查看源碼，但願各位掘友大大給個star

效果圖

(前面一大波長gif來襲)

• 首頁

• 沸點

  

• 搜索

  

• 小冊

• 個人

  

• 用戶主頁

  

• 話題主頁

  

• 文章詳情

  

• 沸點詳情

  

完成度

原本覺得仿照App實現的話應該很快就能夠所有昨晚，可作起來才發現APP 裏面的東西實在是很多(有一些是本菜實在作不了,好比支付)，包括頁面和交互，要徹底照抄實現確實須要一些時間和精力，UI 之類的都是簡單測量+肉眼調試實現的，下面列出頁面和交互的完成度，這裏應該只是列出了絕大部分。未列出、未實現的後續會根據時間、精力來實現。 實際完成度請以代碼爲主

• 啓動頁 不作
• 登陸、未登陸跳轉和頁面數據刷新(邏輯還不夠眼睛)
• 上拉加載、下拉鎖芯
• HOME 完成
  • TAB切換
  • TAB編輯
  • 關注的做者發佈的文章
  • 點贊
• 沸點
  • TAB切換
  • TAB編輯
  • 關注的做者發佈的動態
  • 點贊
  • 沸點詳情
• 搜索 完成
  • 按照綜合、文章、用戶、標籤搜索
• 小冊
  • 小冊列表
  • 小冊詳情
  • 小冊章節詳情
  • 購買小冊 (臣妾作不到啊)
• 個人
  • 我的主頁
    • 編輯
    • 活動
    • 原創文章
    • 沸點
    • 收藏集
      • 收藏集詳情頁
    • 喜歡的文章
    • 關注的標籤
      • 標籤詳情頁
  • 消息中心
  • 贊過的文章和沸點
  • 收藏集
    • 建立的
    • 已關注的
  • 已購小冊 (不知道有沒有問題)
  • 閱讀過的文章
  • 標籤管理
    • 已關注標籤
    • 全部標籤
      • 推薦標籤
      • 全部標籤
    • 關注標籤
  • 夜間模式
  • 設置 完成一些
    • 修改密碼
  • 登陸頁
  • 做者榜
    • 用戶主頁
      • 關注
      • 活動
      • 原創文章
      • 沸點
      • 收藏集
        • 收藏集詳情頁
          • 關注收藏集
          • 收藏集文章列表
      • 喜歡的文章
      • 關注的標籤
        • 標籤詳情頁
  • 話題榜
    • 更多話題
    • 已關注話題
    • 話題詳情
      • 關注話題
  • 文章詳情頁
    • 文章內容
    • 顯示評論
    • 文章做者其餘系列文章
    • 關注做者
    • 收藏文章、分享文章
    • 評論
    • 其餘
  • 沸點詳情頁
    • 文章內容
    • 顯示評論
    • 推薦沸點
    • 關注做者
    • 分享沸點
    • 評論
    • 其餘
• ... 應該還有一些完成的沒有列舉出來，你們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. 後續會不停的完善該項目，把一些可以開發的功能都開發出來，但願各位朋友們多多支持。