music-website's Introduction

👂 前言

这是一个清爽流畅的PC端音乐网站练手项目，服务端使用了开源的网易云音乐API ~

感谢 binaryify 大佬的 NeteaseCloudMusicApi 接口支持 😜

接口文档地址

📔 已有功能

网易云APP扫码登录 & 网易云账号登录
注册
骨架屏
音乐播放器
歌单 & 详情
歌手 & 详情
MV & 详情mv播放
排行榜
搜索
评论
歌词

🚀 运行项目

clone该项目：music-website
安装：npm install
运行：npm run serve
测试环境打包：npm run test
正式环境打包：npm run build
同时打包正式环境 & 测试环境：npm run all
修复：npm run lint

⚡️ 本地开发准备

本地开发请先下载 NeteaseCloudMusicApi 项目
下载完成后，进入NeteaseCloudMusicApi文件夹，打开cmd终端，npm install安装依赖，使用node app.js命令启动
将music-website项目根目录下.env.development文件里VUE_APP_BASE_URL字段修改为NeteaseCloudMusicApi项目启动后的地址，并重启music-website项目

📦️ 目录结构

│  .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
    │  │  request.js => axios封装
    │  └─api => 接口定义
    ├─store => vuex
    ├─utils => 工具类
    └─views => 页面

Recommend Projects