Vue2全家桶+Element搭建的PC端在線音樂網站


1,前言


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

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

2,已有功能


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

功能圖

3,使用


  • Clone該項目:https://github.com/wp993080086/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,頁面效果


視頻地址:https://www.bilibili.com/video/BV1pa411r7d6/

登錄頁

登錄頁


首頁

首頁


排行榜

排行榜


歌單列表

歌單列表


歌單詳情

歌單詳情


歌手列表

歌手列表


歌手詳情

歌手詳情


MV列表

MV列表


MV詳情

MV詳情


搜索頁

搜索


播放器

播放器





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


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


面向百度編程

公眾號

weixinQRcode.png

往期文章

個人主頁


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM