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，页面效果

视频展示：https://www.bilibili.com/video/BV1pa411r7d6/

登录页

首页

排行榜

歌单列表

歌单详情

歌手列表

歌手详情

MV列表

MV详情

搜索页

播放器

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

公众号

往期文章

助你上手Vue3全家桶之Vue3教程
助你上手Vue3全家桶之VueX4教程
助你上手Vue3全家桶之Vue-Router4教程
超详细！Vue的九种通信方式
超详细！Vuex手把手教程
使用nvm管理node.js版本以及更换npm淘宝镜像源
vue中利用.env文件存储全局环境变量，以及配置vue启动和打包命令
超详细！Vue-Router手把手教程

个人主页

CSDN
GitHub
简书
博客园
掘金

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

网易云音乐接口+vue全家桶开发一款移动端音乐webApp
网易云音乐接口+vue全家桶开发一款移动端音乐webApp 项目还在develop中,感兴趣想要参与的小伙伴可以私我效果图: 骨架屏首页侧边栏每日推荐歌单播放器(小) 播放器(大) 详细信 ...
Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记
前言本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...
手机端与PC端在线预览PDF
问题场景公司需要把出具的报告在PC端在线预览,之前一直用embed标签解决,效果很好.产品提出在手机端(微信链接或者手机浏览器)也要在线预览,尴尬的是安卓端提示的是下载,IOS端只能看不能滑动.经一 ...
免费，时长不限制，PC端在线录制屏幕神器题
在日常的工作.生活以及学习过程中,不仅仅是录制电影,像录制游戏.录制课程.录制会议.录制直播等等,都会用到电脑录屏软件.但是,目前网络的现状是:市面上的录屏软件都需要付费,或者免费就是有水印或者限制录 ...
在线音乐网站的设计和搭建
在线音乐网站的设计和搭建目录粒子音乐的设计和搭建文章目录前言一.应用技术二.需求分析三.功能分析四.页面展示 4.1 首页布局 4.2 歌单列表 4.3 专辑列表 4.4 歌手列表 4 ...
基于SSM的在线音乐网站（毕设课设）附论文和答辩PPT，手把手教搭建
本网站基于SSM框架搭建技术实现如下: 后台框架:Spring.SpringMVC.MyBatis UI界面:JSP.jQuery .H-ui 数据库:MySQL 本在线音乐网站采用JSP动态网页开 ...
Vue3 全家桶 + Element Plus + Vite + TypeScript + Eslint 项目配置最佳实践
尤大的 Vue3.0 已经发布有一阵子了,已经很成熟了. 而且 Element Plus + Vite 也出了一段时间了,是时候该上手体验分享一波了. 主要是要熟练一下 Vue3,好准备用 Vue3 ...
基于vue2全家桶开发的匿名朋友圈及聊天应用
前言学习了vue全家桶后一直想找个机会来写一个完整一点的项目,这次学校举办的比赛就是一个很好的契机.由于是自己瞎搞搞,所以写起来比较随心所欲,没有过多地从设计和产品的角度去思考.这个项目包括了图片上 ...
Vue2全家桶之一：vue-cli（vue脚手架）超详细教程
vue.js有著名的全家桶系列,包含了vue-router,vuex, vue-resource,再加上构建工具vue-cli,就是一个完整的vue项目的核心构成 vue-cli这个构建工具大大降低了 ...

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

目录