魔方數位資訊公司的官網,主要功能為手遊資訊交流網站,有最新的手遊新聞、遊戲影音、獨家虛寶。提供會員對遊戲評分、留言、發評論。使用富文本編輯器讓使用者撰寫文章、上傳圖片,還能收藏他人文章、訂閱遊戲等功能。本來使用 Vue CLI 製作,為了 SEO 而改為 Nuxt.js。
使用技術:
- Nuxt.js 與 Vuex 製作 SPA 網站。
- CentOS + Nginx + PM2 部署。
- 使用 Bootstrap 4 和 SCSS 進行切版。
- CKEditor 製作文章編輯器。
- 串接 Youtube、twitch 影音 API。
- 串接 Facebook 社群登入、hCaptcha 驗證。
- Google Cloud Storage 上傳圖片。
- 自動化建立 sitemap。
網站功能:
- 手機遊戲資訊、新聞、評論。
- 會員使用編輯器發表遊戲心得、評論。
- 會員個人頁面,能察看追蹤遊戲、收藏評論。
- 針對遊戲進行評分、留言。
- 領取遊戲虛擬寶物。
- 上傳圖片、發表文章。
在這專案,我學會了:
- 如何使用 Nuxt.js。
- 如何使用 Nginx + PM2 反向代理部署 Nuxt 專案。
- 如何操作 Linux。
- 如何串接 Google Cloud Storage 上傳圖片。
- 如何串接 Youtube、Twitch 等影音平台 API。
- 如何串接 Facebook 社群登入。
- 與設計師、PM、後端工程師討論的技巧。
- 如何搭配套件自動化產生 sitemap。