• 1，前言
• 2，已有功能
• 3，使用
• 4，目錄結構
• 5，頁面效果
  • 登入頁
  • 首頁
  • 排行榜
  • 歌單列表
  • 歌單詳情
  • 歌手列表
  • 歌手詳情
  • MV列表
  • MV詳情
  • 搜尋頁
  • 播放器

1，前言

專案基於Vue2全家桶及網易雲音樂 Node Api實現，網站風格簡約清新，體驗比較流暢。

下載地址：https://github.com/pdd11997110103/web-Music

2，已有功能

• 網易雲APP掃碼登入 & 網易雲賬號登入
• 註冊
• 音樂播放器
• 歌單 & 詳情
• 歌手 & 詳情
• MV & mv詳情
• 排行榜
• 搜尋
• 評論
• 歌詞

3，使用

• Clone該專案：https://github.com/pdd11997110103/web-Music.git
• 安裝：npm install
• 執行：npm run serve
• 測試環境打包：npm run test
• 正式環境打包：npm run build
• 同時打包正式環境 & 測試環境：npm run all
• 修復：npm run lint

4，目錄結構

│  .env.development
│  .env.production
│  .env.test => .env環境檔案
│  .eslintignore => eslint忽略配置
│  .eslintrc.js => eslint配置
│  .gitignore => git忽略配置
│  babel.config.js
│  package-lock.json
│  package.json
│  README.md => 說明檔案
│  vue.config.js => 腳手架配置
├─node_modules => 依賴
├─public
└─src
    │  App.vue => 根容器
    │  main.js => 根檔案
    │  
    ├─assets
    │  ├─css => 公共樣式
    │  │      base.css => 基礎樣式
    │  │      globalColor.less => 全域性顏色
    │  │      init.css => 初始化
    │  ├─icon => 字型圖示
    │  │      
    │  └─image => 圖片
    │      │  
    │      └─info 
    │              
    ├─components => 公共元件
    │          
    ├─mixins
    │      path.js => 常用方法
    │      
    ├─plugins
    │      elementUI.js => 區域性引入elementUi
    │      snowflake.js => 雪花外掛
    │      
    ├─request
    │  │  fetch.js => axios封裝
    │  └─api => 介面定義
    ├─store => vueX
    ├─utils => 工具類
    └─views => 頁面
 

5，頁面效果

登入頁

首頁

排行榜

歌單列表

歌單詳情

歌手列表

歌手詳情

MV列表

MV詳情

搜尋頁

播放器

如果看了覺得有幫助的，我是@鵬多多，歡迎 點贊 關注 評論；END

PS：在本頁按F12，在console中輸入document.querySelectorAll('.diggit')[0].click()，有驚喜哦

公眾號

往期文章

• 助你上手Vue3全家桶之Vue-Router4教程
• 助你上手Vue3全家桶之Vue3教程
• 助你上手Vue3全家桶之VueX4教程
• 使用nvm管理node.js版本以及更換npm淘寶映象源
• 超詳細！Vue-Router手把手教程
• vue中利用.env檔案儲存全域性環境變數，以及配置vue啟動和打包命令
• 微信小程式實現搜尋關鍵詞高亮
• 超詳細！Vue的九種通訊方式
• 超詳細！Vuex手把手教程

個人主頁

• CSDN
• GitHub
• 簡書
• 部落格園
• 掘金