900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 前端学习小demo:使用HTML+CSS+bootstrap+Vue2.0编写一个简易的音乐播放器(仿网易云)

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

时间:2018-12-22 13:26:48

相关推荐

前端学习小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私聊~(●'◡'●)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。