标签：网易 vue 项目 音乐 js 效果图 歌单 item 组件

项目基本分成了七大模块：

     项目发现模块、歌曲详情模块、全局音乐播放组件、歌曲详情模块、歌曲搜索模块、用户登录验证与登录状态维持、个人中心模块以及退出登录

1.项目后端搭建

（1）     下载项目所需后端文件：

（1）     将其通过终端指令node app.js 运行项目所需后端文件

 

    打开之后运行项目：

 

2.项目创建：

（1）     通过使用vue3-cli来创建项目：vue create music002

 

（2）     选取并下载所需依赖包文件

（3）     然后再进行选择vue的版本及其他选项

 

（4）     通过终端指令npm run serve运行项目

 

3.发现页面的实现

先创建一个HomeView.vue的页面，再在页面中引入相关的组件

在public文件下创建一个js文件，引入rem.js用来控制项目中的文本大小，在index.html中引入rem.js

 

矢量图标去阿里巴巴矢量图标库里寻找，加好购物车后添加至项目，可在线获取链接，再引入到页面

 

（1）     头部导航布局和样式：

在components中添加topNav组件

样式：/*space-between 最左、最右item贴合左侧或右侧边框，item与item之间间距相等。

space-around 每个item 左右方向的margin相等。两个item中间的间距会比较大*/

 

（2）     轮播图组件

先下载所需要安装的包

 

（3）     封装请求获取网易云音乐的banner图

安装axios

 

封装一下src下面的文件夹api下的index.js

（4）     新建一个组件IconList.vue，实现效果如下：

 

（5）     实现发现好歌单页面：

新建MusicList.vue，实现基本布局，再做ajax请求

 每一屏可以放几块内容，间距多少

效果图：

（6）     最终效果图：

（7 过滤函数(尝试把播放量数组改成亿或者万，调用方法直接在变量中引用方法)

效果图：

4.Setup中获取路由信息

 

通过路由获取ID值

 

5.歌单详情内容views文件夹下的ListView.vue里面包括了components文件夹下ListViewTop.vue和PlayList.vue两个组件

（1）从数据中获取，设置路由信息，在router文件夹下的index.js里创建路由信息对象数组，在musicList.vue中设置路由导航router-link点击跳转到listView.vue界面

（2）首先我们从后端找到提供的文档的接口，然后再API文件夹下的index.js里面引入，

然后回到listView.vue文件里引入index.js

 

（3）用setup（）使用生命周期函数，

 

在v-m绑定成功之后获取歌单id，之后获取到所点击的歌单id所对应的数据，之后将data歌单数据传给playlist

 

（1）     写完ListViewTop的基本样式之后效果图为：

 

（2）     图片右上角也是运用到过滤函数变成以万为单位的

（3）     下面也是运用到了阿里巴巴矢量图标库里面的内容

 

 

（4）播放内容：利用接收父组件传递的数据，获取歌曲的数量

 

 

收藏里也是调用了changeValue的函数，转换为以万为单位的数目。

效果图：

 

（5）PlayList.vue界面的写法跟listViewTop.vue一样，写出基本样式然后通过v-for循环将歌单数据渲染到页面上

 

效果图：

 

...............

标签：网易,vue,项目,音乐,js,效果图,歌单,item,组件
来源： https://www.cnblogs.com/luyanyan/p/16250976.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。