😉我用 Nuxt.js 仿了個掘金

前言

首先確定是要誇誇掘金啦，最開始從 CSDN 到 博客園 再到 掘金，我的感受掘金的技術氛圍很是的nice，真是個寶藏社區👏。技術文章大多之前端爲主，對前端開發者很是友好，質量也是歪瑞古的。學習是不可能不學習的，這輩子都不可能不學習的，只有敲敲代碼複製粘貼才能維持得了生活這樣子，進到這裏處處都是大佬，沸點騷話又好聽，嗚喲~ 超喜歡這裏的，哈哈哈😀

說實話，我絕大多數的學習動力還真是掘金帶來，不論是文章仍是小冊都能充實到本身，還有基本天天早上坐地鐵會刷下掘金，而後觸及到個人知識盲區，而後就是 懷疑人生 動力滿滿的一天（不知道有沒有和我同樣的😅）。因此，當你在掘金看到的越多，你就會發現本身越 廢物 眇小（來一波毒雞湯，時刻提醒本身要保持學習）。

廢話很少說了，進入正題~

介紹

nuxt-juejin-project 是一個使用 Nuxt.js 仿寫掘金的學習項目，主要使用 ：nuxt + koa + vuex + axios + element-ui。該項目全部數據與掘金同步，由於接口都是經過 koa 做爲中間層轉發（找接口真是個累活😅），從新定義接口路由以及對部分接口數據作處理。頁面主要數據請求經過 asyncData 在服務端進行拼接並返回前端渲染。在寫項目時我會盡量的使用 Nuxt.js 提供的配置以及一些技術點（服務端渲染、接口轉發、路由配置、權限驗證等），但願藉此更全面的學習服務端渲染項目的流程。

該項目是我初次使用 Nuxt.js 製做的，可能部分流程細節不夠好。若是你想學習的話，建議只是用來參考，但願不要誤導你。

功能

- 登陸/登出

- 權限驗證
  - 登陸狀態驗證
  - 交互驗證

- 首頁
  - 文章篩選（分類、熱門、最新、熱榜）
  - 文章觸底分頁
  - 做者榜模塊
  - 推薦小冊模塊

- 文章詳情
  - 正文
  - 目錄跳轉
  - 文章評論
  - 文章分享
  - 相關推薦
  - 關於做者模塊
  - 相關文章模塊

- 做者頁
  - 做者信息
  - 文章篩選（熱門、最新）
  - 文章觸底分頁
  - 我的成就模塊
  - 頭像彩蛋😛

- 搜索
  - 類型篩選（綜合、文章、標籤、用戶）
  - 時間篩選（所有、一天內、一週內、三月內）

- 沸點
  - 沸點篩選（推薦、熱門、關注、分類）
  - 沸點觸底分頁
  - 沸點評論
  - 沸點分享
  - 大圖預覽
  - 推薦沸點模塊
  - 關注的話題模塊

- 話題
  - 關注的話題、所有話題
  - 文章篩選（熱門、最新）
  - 文章觸底分頁
  - 話題詳情模塊
  - 參與者模塊

- 標籤
  - 標籤詳情 
  - 文章篩選（熱門、最新、最熱）
  - 文章觸底分頁

- 標籤管理
  - 已關注標籤、所有標籤

- 消息
  - 用戶消息

- 小冊
  - 小冊篩選（分類）
  
 - i18n國際化

- 錯誤頁
  - 404

- 交互相關
  - 點贊（文章、沸點）
  - 關注（做者、標籤）
複製代碼

😶利用摸魚時間更新中...

文件結構描述

爲了快速的瞭解項目，在此對項目文件結構作出描述。

├─assets  // 存放靜態資源（如：scss）
│
├─layouts // 頁面主要佈局、自定義錯誤頁面
│
├─components  // 頁面組件
│ ├─business  // 業務組件
│ ├─common    // 公用組件
│
├─middleware  // 應用中間件（如：權限驗證）
│
├─mixins      // 公用邏輯抽離（如：觸底事件）
│
├─pages       // 頁面視圖
│
├─plugins     // 插件（如：axios、api）
│
├─server      // 服務端
│ ├─middleware  // 服務端使用的中間件
│ ├─request     // 請求方法封裝
│ ├─routes      // 接口轉發
│
├─store       // vuex
│
├─utils       // 工具方法
│
│nuxt.config.js   // Nuxt.js應用配置
複製代碼

部分效果截圖

• 首頁

• 詳情

• 搜索

• 沸點

• 話題

項目啓動

# 克隆項目
git clone https://github.com/ChanWahFung/nuxt-juejin-project.git

# 進入項目目錄
cd nuxt-juejin-project

# 安裝依賴
npm install

# 服務啓動
npm run dev
複製代碼

訪問 http://localhost:8000

國內 github 克隆會比較慢，你能夠選擇從碼雲克隆

git clone https://gitee.com/ChanWahFung/nuxt-juejin-project.git
複製代碼

寫在最後

項目最開始是3月初就創建，基本都是在看文檔寫小例子熟悉api（中間停了一段時間）。本來只是想大概瞭解一下 Nuxt.js，沒想到要作一個項目出來。而後某一天，忽然想起一句話：學了不用就是白給。恰好這段時間公司項目不是很緊，因而在3月底便開始用 Nuxt 仿掘金。項目基本都是用上班摸魚時間還有下班時間慢慢作的，3月底到如今算下來快一個半月，其實學 Nuxt.js 的過程不僅僅只是學會這一門框架，其中還會發現本身在其餘方面的不足，有時候作到一半會去補充這方面的知識。因此在學習新知識時，仍是要更多的學習和作個實際的東西出來，而不是淺嘗即止。但願你們在學習時要有種求知若渴的心態~

筆記戳這裏，若是以爲項目還能夠，歡迎star~✨，項目地址：github.com/ChanWahFung…