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詳情
搜索頁
播放器
如果看了覺得有幫助的,我是@鵬多多,歡迎 點贊 關注 評論;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手把手教程
個人主頁