HexfootMusic

想聽歌?那就來 ♫ 六腳音樂大平台 吧!|

HexfootMusic 介紹

該專案是採用 KKBOX OPEN API + Vue Cli 3 所製作，僅限前端開發練習 DEMO 用。

DOME

https://hsiangfeng.github.io/HexfootMusic/#/

簡介

此作品為 Vue Cli 前端練習，其主要功能有以下:

• 熱門歌單查看並試聽
• 選擇曲風查詢並試聽
• 排行榜試聽
• 歌曲、歌手、歌單查詢
• 猜歌小遊戲
  • 一般模式
  • 30 秒模式

使用技術 & 練習技術

• KKBOX OPEN API
• YouTube Data API
• Vue Cli 3
• Vuex
• Vue-Router
• Vue Components
• PWA
• RWD
• Bootstrap4
• jQuery
• JavaScript(ES6等)
• PUG
• SCSS
• CORS
• Webpack
• ESlint(aribnb)
• Adobe XD

Vue-Plugin or Other-Plugin

• Vue-cli-plugin-pwa
• Vue-fontawesome
• Vue-axios
• Vue-typed-js
• Vue-awesome-swiper
• Vue-loading-overlay
• Vue-router
• Vue-cli-plugin-pug
• Vue-radial-progress
• Vue-sweetalert2
• Vue-countup-v2
• Popper.js

前端介紹

過場動畫

Logo 製作是使用 Adobe XD 製作，並製作兩張圖合成為 Gif 檔。

首頁

查詢

KKBOX 播放介面

Youtube 播放介面

風格查詢

小遊戲

小遊戲有分兩種模式

• 一般模式
• 30 秒模式

一般模式

30 秒模式

Project setup

development

npm install
npm run serve

.env 設定

• 建立 App 並獲得 Client ID 及 Client Secret

修改 .env 的 YOUR_CLIENT_ID 及 YOUR_CLIENT_SECRET
VUE_APP_CLINETID=YOUR_CLIENT_ID
VUE_APP_CLIENTSECRET=YOUR_CLIENT_SECRET

其他細節

本作品還有支援 PWA，詳情請見作品。

聲明

本作品內圖片、內容等，純粹為個人練習前端使用，不做任何商業用途。