前端学习小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 项目的名称(最好是全英文)

                具体的配置如下:

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

        

在工程化的项目中:通过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文件、图片等

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

        3.编写对应的代码  

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

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

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

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

       4.运行项目

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

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

        5.效果展示:(搜索:张杰的歌为例)

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

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

你可能感兴趣的:(Web,html,前端,css)