美文网首页
Vue2全家桶+Element搭建的PC端在线音乐网站

Vue2全家桶+Element搭建的PC端在线音乐网站

作者: 鹏多多 | 来源:发表于2021-12-07 23:31 被阅读0次

1,前言


项目基于Vue2全家桶网易云音乐 Node Api实现,网站风格简约清新,体验比较流畅。

下载地址:https://github.com/wp993080086/music-website
预览地址:music-website

2,已有功能


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

3,使用


  • Clone该项目:git@github.com:wp993080086/music-website.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列表

MV详情

MV详情

搜索页

搜索

播放器

播放器

如果看了觉得有帮助的,我是@鹏多多11997110103,欢迎 点赞 关注 评论;
END

PS:在本页按F12,在console中输入document.querySelectorAll('._2VdqdF')[0].click(),有惊喜哦

往期文章

个人主页

相关文章

网友评论

      本文标题:Vue2全家桶+Element搭建的PC端在线音乐网站

      本文链接:https://www.haomeiwen.com/subject/bojzxrtx.html