前端学习小demo：使用HTML+CSS+bootstrap+Vue2.0编写一个简易的音乐播放器（仿网易云）

具体的操作流程（实现步骤）：

1.歌曲搜索

2.歌曲播放

3.歌曲评论

4.播放歌曲的MV（有的歌曲没有MV）

代码编写过程：

1.创建一个Vue项目（前提是安装好了node.js、npm、vue）

使用npm install命令，安装命令：npm install -g @vue/cli

vue create 项目的名称（最好是全英文）

具体的配置如下：

在工程化的项目中：通过main.js把App.vue渲染到index.html的指定区域中。

其中：

1）App.vue用来编写带渲染的模板结构

2）index.html中需要预留一个el区域（el即对应的HTML中的div的id或者class名称）

3）main.js把App.vue渲染到index.html所预留的区域中

2.导入需要的css文件、js文件、图片等

3.编写对应的代码

assets文件夹，存放项目中用到的静态文件，例如：CSS样式表，图片资源

components文件夹，程序员封装的，可复用的组件，都要放到components文件下

main.js是项目的入口文件，整个项目的运行，要先执行main.js

App.vue是项目的根组件（刚进入网站见到的页面/首页相当于index.html）

4.运行项目

先切换到当前这个项目的目录下，之后使用命令：npm run serve命令运行项目

注意：在开发阶段 run serve 上线阶段 run build

5.效果展示：（搜索：张杰的歌为例）

如果需要源码，关注后评论or私聊~(●'◡'●)

前端学习小demo：使用HTML+CSS+bootstrap+Vue2.0编写一个简易的音乐播放器（仿网易云）相关推荐

HTML+CSS+原生JS写一个简易的音乐播放器（仅播放一首歌）
用HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌) 效果如下:(鼠标点击按钮可以实现播放或暂停,按钮会旋转,实现了歌词同步,功能还需改进) 代码如下: <!DOCTYPE htm ...
【html、css、jq】制作一个简洁的音乐播放器
声明:本文章版权归饥人谷和张新望所有,转载需经作者同意这个播放器的音乐是通过豆瓣FM的API获取到的,我们可以随机的听到豆瓣FM的任何音乐.(这些API是饥人谷的老师整理的) DEMO html+j ...
【前端实例代码】Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果~前端开发网页设计基础入门教程~超简单~
b站视频演示效果: [前端实例代码]Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果!前端开发网页设计基础入门教程!超简单~ 效果图: 完整代码 ...
音乐磁盘样式怎么用css做,使用余弦定理制作磁盘形状h5音乐播放器_html/css_WEB-ITnose...
目录 [1]功能实现 [2]效果展示 [3]原理说明旋转原理余弦定理 [4]代码实现 HTML CSS JS [5]源码查看功能实现 [1]歌曲播放进度转换成视觉的旋转角度 [2]点击磁盘任意位 ...
Qt学习笔记-编写简易的音乐播放器
程序运行截图如下: 再次添加一个音乐并播放: 代码如下: widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #inc ...
微信小程序用wx.getRecorderManager()和wx.createInnerAudioContext()制作一个简单的录音播放器（录制以及播放）
在开发的时候公司提出了一个如题的要求,发现微信官方文档里好像没有相关的组件,就自己做了一个简单的,可以实现用户录制音频,播放和暂停的需求.放上来供大家参考预览 wxml <view>&l ...
前端----利用html,css,js自制有趣的音乐播放器
最近在学前端,然后做了一个简易的音乐播放器,原本只是一个静态的网页,用a标签实现链接,embed标签引入mv,audio标签实现音乐播放,右边的marquee标签实现歌词滚动但是总觉得还不够,就加上了 ...
【微信小程序】音乐播放器
场景使用微信小程序实现一个简易的音乐播放器:Github地址效果虽然界面很简单,但是一个音频播放器该有的功能大部分都有了(没有歌词显示功能). 主要实现的功能有: 实现音频播放,暂停: 实现拖拽 ...
Android应用--简、美音乐播放器原型放送（作者：小巫）
Android应用--简.美音乐播放器原型放送 2013年7月5日简.美音乐播放器开发前言:小巫的简.美音乐播放器从5月7号开始开发,之前以为时间很充足,也没有估量整个软件的需求,如果简单实现基本的 ...

前端学习小demo：使用HTML+CSS+bootstrap+Vue2.0编写一个简易的音乐播放器（仿网易云）

前端学习小demo：使用HTML+CSS+bootstrap+Vue2.0编写一个简易的音乐播放器（仿网易云）相关推荐

最新文章

热门文章