目录一、前言二、首页实现及效果图1.效果图2.项目结构、设计说明3.顶部菜单4.首页轮播图5.歌单推荐三、歌单实现1.效果图2.轮播图动态切换效果3.歌单详情四、 专辑1.专辑首页-效果图2.专辑详情-效果图五、榜单1.榜单-效果图2.歌曲详情六、歌手列表1. 列表效果图2.歌手详情七、登录页1.效果图2.源码实现八、总结一、前言源码下载https://download.csdn.net/download/lucky_fang/92709379​​​​​​​项目在线预览点击访问咪咕音乐网最近看到其官网第一感觉真的很美观大方有被它惊艳到。所以作者忍不住做了一版仿照咪咕音乐的demo。与音乐相关的demo之前也发过一篇关于QQ音乐的demo可以访问《vueelement高度仿照QQ音乐完美实现PC端QQ音乐》二、首页实现及效果图1.效果图2.项目结构、设计说明项目以vue项目创建前端某些元素使用element项目启动执行的命令为npm installnpm run dev结构如下截图项目已经集成和实现了需要请求后端接口的一切功能所以无须花费精力去考虑前端如何去对接后端和接口可以把一切精力放在实现前端界面设计上来。这样不懂后端的伙伴也省心省力接口请求只需按照模板去copy就好无非就是get/post/delete/put等请求方式和参数传递的差别当然不明白的可以细问作者。项目结构还是分为顶部具体功能显示容器底部页面存放于src/page目录下看目录命名就能明白其含义具体功能页面在views目录下。路由在router目录中全局布局公用样式在styles比如整个项目框架左右空间布局最小宽度等。路由权限也是很重要的一个功能为permission.js所有页面跳转都会经过其拦截有人问路由权限有什么用好说比如订单页面或个人中心页面吧肯定是需要登录才能访问的首页却是无需登录即可访问的那么就可以在permission.js里面获取登录token有token即表示已经登录可以访问订单或个人中心页面否则跳转登录页等。3.顶部菜单顶部菜单分为两级菜单交互为鼠标聚焦触发源码实现template div idheader div classcontain-box header h1 classlogo a hrefhttps://music.migu.cn title咪咕音乐 music.migu.cn img src../../../public/img/logo.png alt咪咕音乐 放厮听·趣玩乐 /a /h1 div classheader-left ul classnav-container li classnav-item on>4.首页轮播图轮播图使用element的走马灯效果element好处就是简单方便使用。Element - The worlds most popular Vue UI framework5.歌单推荐模仿官方样式鼠标聚焦显示播放按钮同时显示音波震动效果源码实现div idplaylist classsection contain-box div classcontainer section-header h2 classtitle歌单推荐/h2 a classmore更多i classiconfont el-icon-arrow-right/i/a /div div classcontainer div classwrapper-contain div classwrapper-items div classitem-contain v-for(item,index) in recommends :keyindex div classthumb div classitem-box a classimg-box img :srcitem.img :altitem.name classimg-block lazy-img img-full /a span classplaylist-play btn-play img classcf-play src../../../public/img/btn-play.png /span p classitem-playCnti classiconfont el-icon-headset stylefont-size: 16px;line-height: 24px;/i{{item.listenNum}}/p /div div classitem-info a classitem-title{{item.name}}/a /div /div /div /div /div /div /div div idalbum classsection contain-box div classcontainer section-header h2 classtitle新碟上架/h2 a classmore更多i classiconfont el-icon-arrow-right/i/a /div div classcontainer div classwrapper-items div classitem-contain v-for(item,index) in newDiskList :keyindex div classthumb div classitem-box a classimg-box img :srcitem.img :altitem.name classimg-block lazy-img img-full /a i classalbum-cover/i span classalbum-play btn-playimg classcf-play src../../../public/img/btn-play.png/span span classupdate-time2023-04-20/span /div div classitem-info p classalbum-name name-block a{{item.name}}/a /p p classsinger block-name-next a那英/a / a马伊琍/a / a许一鸣/a / a田园/a / a董冬冬/a / a白宇/a / aA-Lin/a /p /div /div /div /div /div /div div iddigitalAlbum classsection div classcontainer section-header contain-box h2 classtitle数字专辑/h2 a classmore更多i classiconfont el-icon-arrow-right/i/a /div div classback-wrapper stylepadding: 21px 0; div classcontainer contain-box div classwrapper-items div classitem-contain v-for(item,index) in digitalAlbumList div classthumb div classitem-box a classimg-box img :srcitem.img :altitem.name classimg-block lazy-img img-full /a i classalbum-cover/i span classupdate-time2023-04-30/span /div div classitem-info p classalbum-name name-block a{{item.name}}/a /p p classsinger block-name-next a朝简/a / a窦唯/a /p /div /div /div /div /div /div /div数据构造源码script export default { data() { return { banners:[//轮播图 require(../../../public/img/230517091951259_1400x350_5713.jpg), require(../../../public/img/23051910364536_1400x350_3748.jpg), require(../../../public/img/230519104200186_1400x350_6951.jpg), require(../../../public/img/230519105837175_1400x350_329.jpg), require(../../../public/img/230519105101366_1400x350_2796.jpg), require(../../../public/img/230519132656314_1400x350_6114.jpg), require(../../../public/img/23051613414308_1400x350_1883.jpg) ], recommends:[//推荐 {name:〔骑行在路上〕无限循环解压必备,img:require(../../../public/img/272769fe-fd84-437d-8e74-84a199a9d2a7.jpg),listenNum:198.2w}, {name:粤语回忆录|回忆杀里的经典记录,img:require(../../../public/img/5a5e7199-5ceb-4094-aa87-4f446670432a.jpg),listenNum:155.6w}, {name:学习纯音 | 凝神静气思维跃升,img:require(../../../public/img/b72d056e-3fc7-4c18-b95b-2d3f215a1f25.jpg),listenNum:119.2w}, {name:宅家小调丨平凡小事促成美好日常,img:require(../../../public/img/482f5fb2-10ff-4f6f-b8a8-a18dad8a8fb7.jpg),listenNum:95.8w}, {name:散步减压丨远离繁华走向空旷,img:require(../../../public/img/356363c5-26a1-4ea9-b83e-326e7cd000f1.jpg),listenNum:93.5w}, {name:驾车希望不辜负理想也不辜负热爱,img:require(../../../public/img/b981f60f-3785-4dac-a7f3-f5cb7d5eaefc.jpg),listenNum:93.2w}, {name:〔骑行在路上〕无限循环解压必备,img:require(../../../public/img/272769fe-fd84-437d-8e74-84a199a9d2a7.jpg),listenNum:198.2w}, {name:粤语回忆录|回忆杀里的经典记录,img:require(../../../public/img/5a5e7199-5ceb-4094-aa87-4f446670432a.jpg),listenNum:155.6w}, {name:学习纯音 | 凝神静气思维跃升,img:require(../../../public/img/b72d056e-3fc7-4c18-b95b-2d3f215a1f25.jpg),listenNum:119.2w}, {name:宅家小调丨平凡小事促成美好日常,img:require(../../../public/img/482f5fb2-10ff-4f6f-b8a8-a18dad8a8fb7.jpg),listenNum:95.8w}, {name:散步减压丨远离繁华走向空旷,img:require(../../../public/img/356363c5-26a1-4ea9-b83e-326e7cd000f1.jpg),listenNum:93.5w}, {name:驾车希望不辜负理想也不辜负热爱,img:require(../../../public/img/b981f60f-3785-4dac-a7f3-f5cb7d5eaefc.jpg),listenNum:93.2w} ], newDiskList:[//新碟上架 {name:《龙城》影视原声带,img:require(../../../public/img/AS6b7741232ee61de18b9c31babc5795ff.jpg)}, {name:瞧!你这小脾气 影视剧原声带,img:require(../../../public/img/AS7b869e0e8002e25bac9fa77ef5f5d3a8.jpg)}, {name:泰版《放羊的星星》原声带,img:require(../../../public/img/ASa375961663661da5a832cc028de468a9.jpg)}, {name:鲸鱼马戏团VOL.7 索拉里斯 —— 时间与永恒,img:require(../../../public/img/AS99df91468fcb4791943ef12808449191.jpg)}, {name:《声生不息·宝岛季》第5期,img:require(../../../public/img/AS8e621cc6f42ee7f29d146771bd505032.jpg)}, {name:《龙城》影视原声带,img:require(../../../public/img/AS6b7741232ee61de18b9c31babc5795ff.jpg)}, {name:瞧!你这小脾气 影视剧原声带,img:require(../../../public/img/AS7b869e0e8002e25bac9fa77ef5f5d3a8.jpg)}, {name:泰版《放羊的星星》原声带,img:require(../../../public/img/ASa375961663661da5a832cc028de468a9.jpg)}, {name:鲸鱼马戏团VOL.7 索拉里斯 —— 时间与永恒,img:require(../../../public/img/AS99df91468fcb4791943ef12808449191.jpg)}, {name:《声生不息·宝岛季》第5期,img:require(../../../public/img/AS8e621cc6f42ee7f29d146771bd505032.jpg)} ], digitalAlbumList:[//数字专辑 {name:神女赋,img:require(../../../public/img/AM85cc6100766e75b3e8115973ad1316ca.jpg)}, {name:琵琶行,img:require(../../../public/img/AM8f61951fa2888ed88f64c724d3057c23.jpg)}, {name:宋词,img:require(../../../public/img/AMd388fa758ff8baaa5bc236aa96c69887.jpg)}, {name:元曲,img:require(../../../public/img/AM5176573d3745c183aa1cbad23479ef8f.jpg)}, {name:DREAMS,img:require(../../../public/img/AMeb1420713a4a582e7e681ffc75048038.jpg)}, ], rankingBanner:[//顶部小轮播图 require(../../../public/img/small-banner1.jpg), require(../../../public/img/small-banner2.jpg), require(../../../public/img/small-banner3.jpg) ] }; }, mounted() { }, methods: { } }; /script三、歌单实现1.效果图2.轮播图动态切换效果轮播图左右动态切换使用JavaScript事件setInterval方法每隔3毫秒递增或递减left边距变化来实现setInterval动态切换效果源码script export default { data() { return { bannerLeft: 0, moreLeft: 0,//左右移动轮播图-最大值 move: false, banners:[ {img:require(../../../public/img/4aa0fcf9-69f8-45b0-ba77-ce6ad96b25c2.jpg),listenNum:159.1w,name:【煲耳机无损精选】你要的白噪音粉红噪音都在这里}, {img:require(../../../public/img/6d69b614-c898-41a1-80fc-3bb410900e6e.jpg),listenNum:247.1w,name:90后回忆向丨学生时代听过的那些流行歌}, {img:require(../../../public/img/d9033323-69e4-43aa-b2d1-d055716259ad.jpg),listenNum:66.8w,name:经典|用电影配乐讲故事}, {img:require(../../../public/img/b2081de7-720b-4ef0-8a03-3ee5cf6f5694.jpg),listenNum:91.9w,name:轻摇旋律丨让疲惫无处可藏}, {img:require(../../../public/img/84a7786f-649f-4e22-a3a1-ebc52e4c1bdc.jpg),listenNum:0.7w,name:国际天后 · CoCo李玟}, {img:require(../../../public/img/e84de956-bc96-4c49-8a7a-d658dcd57048.jpg),listenNum:78.7w,name:开口就能让你爱上欧美流行歌曲}, {img:require(../../../public/img/f240e2f2-1365-460c-a8c8-15bc566d55c3.jpg),listenNum:62.2w,name:别把遗憾推给来日方长}, {img:require(../../../public/img/72f481e7-8a80-4368-8511-932c5f90d881.jpg),listenNum:57.4w,name:古风| 朗朗盛世 共悦未来} ], showMore: false, menuIndex: 1,//选中的菜单 data:[ {name:华语RB悦耳律动指尖随之跳动,img:require(../../../public/img/7af23a79-b662-46c6-bd0f-bb14048da085.jpg),listenNum:188.8w}, {name:国风| 青鸟踏沧浪随诗抵达他乡,img:require(../../../public/img/67c2b1f1-9eaa-4da1-af83-4df6b3b07571.jpg),listenNum:180.0w}, {name:清新灵动的欧美吉他弹唱,img:require(../../../public/img/071a23a4-f37b-4ce3-84a7-8e2e5845e31d.jpg),listenNum:139.2w}, {name:静享惬意时光|陪你出游的清新小调,img:require(../../../public/img/43fb0c11-dfef-42fa-94c9-008d62c45592.jpg),listenNum:192.8w}, {name:特立独行|小众宝藏等一双发现美的耳朵,img:require(../../../public/img/73eb4544-e9f6-4585-9cc5-fc7874393d07.jpg),listenNum:137.7w}, {name:怀旧丨童年是梦 梦向外婆的桥,img:require(../../../public/img/2dd9186a-9fa1-4868-a773-3a01b90a84a4.jpg),listenNum:43.3w}, {name:华语RB悦耳律动指尖随之跳动,img:require(../../../public/img/7af23a79-b662-46c6-bd0f-bb14048da085.jpg),listenNum:188.8w}, {name:国风| 青鸟踏沧浪随诗抵达他乡,img:require(../../../public/img/67c2b1f1-9eaa-4da1-af83-4df6b3b07571.jpg),listenNum:180.0w}, {name:清新灵动的欧美吉他弹唱,img:require(../../../public/img/071a23a4-f37b-4ce3-84a7-8e2e5845e31d.jpg),listenNum:139.2w}, {name:静享惬意时光|陪你出游的清新小调,img:require(../../../public/img/43fb0c11-dfef-42fa-94c9-008d62c45592.jpg),listenNum:192.8w}, {name:特立独行|小众宝藏等一双发现美的耳朵,img:require(../../../public/img/73eb4544-e9f6-4585-9cc5-fc7874393d07.jpg),listenNum:137.7w}, {name:怀旧丨童年是梦 梦向外婆的桥,img:require(../../../public/img/2dd9186a-9fa1-4868-a773-3a01b90a84a4.jpg),listenNum:43.3w}, {name:华语RB悦耳律动指尖随之跳动,img:require(../../../public/img/7af23a79-b662-46c6-bd0f-bb14048da085.jpg),listenNum:188.8w}, {name:国风| 青鸟踏沧浪随诗抵达他乡,img:require(../../../public/img/67c2b1f1-9eaa-4da1-af83-4df6b3b07571.jpg),listenNum:180.0w}, {name:清新灵动的欧美吉他弹唱,img:require(../../../public/img/071a23a4-f37b-4ce3-84a7-8e2e5845e31d.jpg),listenNum:139.2w}, {name:静享惬意时光|陪你出游的清新小调,img:require(../../../public/img/43fb0c11-dfef-42fa-94c9-008d62c45592.jpg),listenNum:192.8w}, {name:特立独行|小众宝藏等一双发现美的耳朵,img:require(../../../public/img/73eb4544-e9f6-4585-9cc5-fc7874393d07.jpg),listenNum:137.7w}, {name:怀旧丨童年是梦 梦向外婆的桥,img:require(../../../public/img/2dd9186a-9fa1-4868-a773-3a01b90a84a4.jpg),listenNum:43.3w} ] }; }, mounted() { this.moreLeft -((this.banners.length - 6) * 217); }, methods: { getMoreBanner(index){//左右移动轮播图-查看更多 if(this.move){ return; } if(index 1){//左移 if(this.bannerLeft 0){ return; } let end this.bannerLeft 217; let that this; let inter setInterval(function(){ that.move true; that.bannerLeft; if(that.bannerLeft end){ clearInterval(inter); that.move false; } },3); }else if(index 2){//右移 if(this.bannerLeft this.moreLeft){ return; } let end this.bannerLeft - 217; let that this; let inter setInterval(function(){ that.move true; that.bannerLeft--; if(that.bannerLeft end){ clearInterval(inter); that.move false; } },3); } } } }; /script3.歌单详情四、 专辑1.专辑首页-效果图2.专辑详情-效果图五、榜单1.榜单-效果图2.歌曲详情六、歌手列表1. 列表效果图2.歌手详情七、登录页1.效果图2.源码实现template div idbody div style;width: 100%;height: 100%;overflow: hidden; div clickhomePage stylecursor: pointer; classpage_one_title/div div :classmodalType login?login-modal:register-modal div classlogin-title{{modalType login?登录:欢迎注册}}/div el-form classform v-showmodalType login :rulesloginRules refloginForm :modelloginForm label-width0 el-form-item propusername el-input placeholder请输入用户名/手机号 prefix-iconel-icon-mobile-phone v-modelloginForm.username /el-input /el-form-item el-form-item proppassword el-input typepassword placeholder请输入密码 prefix-iconel-icon-lock v-modelloginForm.password /el-input /el-form-item el-form-item el-button typeprimary stylewidth: 100%; click.native.preventhandleLogin classlogin-submit登录/el-button /el-form-item div styletext-align: center; 没有账号span stylecursor: pointer;color: #df1f20; clickchangeModalType(register)注册/span /div /el-form el-form classform v-showmodalType register :rulesregisterRules refregisterForm :modelregisterForm label-width0 el-form-item propusername el-input placeholder请输入用户名 prefix-iconel-icon-mobile-phone v-modelregisterForm.username /el-input /el-form-item el-form-item propphone el-input placeholder请输入手机号 prefix-iconel-icon-mobile-phone v-modelregisterForm.phone /el-input /el-form-item el-form-item proppassword el-input typepassword placeholder请输入密码 prefix-iconel-icon-lock v-modelregisterForm.password /el-input /el-form-item el-form-item propvalidCode el-input placeholder请输入验证码 v-modelregisterForm.validCode el-button slotappend clicksendValidCode发送短信验证码/el-button /el-input /el-form-item el-form-item el-button typeprimary stylewidth: 100%; click.native.preventhandleRegister classlogin-submit注册/el-button /el-form-item div v-ifmodalType ! login styletext-align: center;font-size: 14px; 已有账号span stylecursor: pointer;color: #df1f20; clickchangeModalType(login)登录/span /div /el-form /div /div /div /template script export default { name: index, data() { return { loading: true, modalType: login, loginForm: { username:,//用户名 password: ,//密码 }, registerForm: { username:,//用户名 phone: ,//手机号 password: ,//密码 validCode:,//验证码 }, loginRules: { username: [ {required: true, message: 请输入用户名/手机号, trigger: change} ], password: [ {required: true, message: 请输入密码, trigger: change} ] }, registerRules: { username: [ {required: true, message: 请输入用户名, trigger: change} ], phone: [ {required: true, message: 请输入手机号, trigger: change} ], password: [ {required: true, message: 请输入密码, trigger: change}, {min: 1, message: 密码长度最少为6位, trigger: change} ], validCode: [ {required: true, message: 请输入验证码, trigger: change} ] }, }; }, mounted() { }, methods: { changeModalType(type){ this.modalType type; this.$refs.loginForm.resetFields(); this.$refs.registerForm.resetFields(); }, homePage(){ this.$router.push({path: /}); }, handleLogin() {//登录 let that this; that.$refs.loginForm.validate(valid { if (valid) { const loading that.$loading({ lock: true, text: 登录中,请稍后。。。, spinner: el-icon-loading }); //延时1秒模拟请求效果 setTimeout(function(){ that.$notify({ title: 提示, message: 登录成功, type: success //duration: 0//为0则不会自动关闭 }); that.$router.push({path:/}); loading.close(); },1000) } }); }, //发送验证码 sendValidCode(){ this.$refs.registerForm.validate(valid {//表单验证 }) }, handleRegister() {//注册 let that this; that.$refs.registerForm.validate(valid { if (valid) { const loading that.$loading({ lock: true, text: 注册中,请稍后。。。, spinner: el-icon-loading }); //延时1秒模拟请求效果 setTimeout(function(){ that.$notify({ title: 提示, message: 注册成功请登录, type: success //duration: 0//为0则不会自动关闭 }); that.modalType login; loading.close(); },1000) } }); } } } /script八、总结关注作者及时了解更多好项目作者主页也有更多好项目分享获取源码或如需帮助可通过博客后面名片作者即可其他作品集合《vue实现功能完整的购物商城商品零食、电商通用商城》《vueelement实现蔬菜、水果、电商商城》《vueelement简单实现电商商城网站模仿小米电商商城》《vue实现美观大方的动漫、cos、帖子类型网站》《vue实现好看的相册、图片网站》《高度仿PC版《微信读书》好看的小说、读书网站》《vueelement实现非常好看的鲜花网站商城页面完整样式美观》《vueelementuispringboot前后端分离实现通用商城管理后台》《微信小程序日记、微信小程序个人空间、个人日记》《vueelement模仿腾讯视频电影网站》《vueelement高度仿照QQ音乐完美实现PC端QQ音乐》《vueelement详细完整实现个人博客、个人网站》《vueelementuispringboot前后端分离实现学校帖子网站学校大作业》《vueelementui实现U袋网-完整版》《vueelementelectron仿微信实现》《vueelement模仿电商商城前后端分离实现下单微信扫码支付》《electronvueelementui实现类似QQ窗口靠边自动边缘隐藏》《微信小程序仿唯聚时代微信小程序商城》《jquerybootstrap完整丰富样式开发框架源码各种现成样式简单易用》《htmlcss响应式旅游主题网站模板旅游网站企业文化新闻类网站》《csshtml各种动态、动画、3D相册等7件套》《仿华为电商商城官网华为超级新品日demo,大屏霸气且简洁》《vueelement简单实现商城网站首页模仿电商商城》《vueelementui实现非常好看的博客、网站首页网站模板》《elementuivue实现经典管理系统布局框架拿来即用》《简系统登录页模板htmlvueelementui》《vueelementui完美实现博客、网站、个人网站高仿“张凯博客”》《vueelementui完美实现后台管理系统的左、右、顶部菜单布局》《html5css3实现3D正方体动画相册2种3D旋转木马立体动画相册表白文字加动画爱心炫酷万花筒五件套含音乐》《后端使用springbootmavenshiromybatismysql前端使用H-ui.admin_v3.1.3.1快速实现管理后台功能》《springbootthymeleafmavenhtmlcss实现精美大方好看官网模板完整源码》《htmlcss实现好友列表类似QQ群聊成员列表》