本项目使用vue2+vue-cli
实现了一个简易的网易云音乐(App版本),实现了歌曲的首页推荐展示,歌曲的搜索,评论的展示以及歌曲的播放四个主要功能模块,主要用来练手,效果如下图所示:
首页
搜索页面
github地址:cloud-music
在线预览::https://music.vrteam.top
总结
:根据文档在后端跑起来代理服务器
接下来使用yarn
代替npm
,原因:https://blog.csdn.net/qq_39122387/article/details/109675680
vue create music-demo
总结
:默认选择vue2
和yarn
安装依赖的方式
进入项目文件夹
cd music-demo
第三方依赖
yarn add axios vant@latest-v2 vue-router@3
注意版本,这个是vue2的项目,对应的包有所变化
生产依赖
yarn add babel-plugin-import postcss postcss-pxtorem@5.1.1 -D
yarn add less less-loader@5.0.0 -D
引入本地样式、图标
// 字体图标
import '@/assets/fonts/TsangerYuYangT_W01_W01.ttf'
//自适应
import '@/mobile/flexible'
//初始化样式
import '@/styles/reset.css'
在babel.config.js - 添加vant按需引入插件配置
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
postcss.config.js自定义自适应比例
module.exports = {
plugins: {
'postcss-pxtorem': {
// 能够把所有元素的px单位转成Rem
// rootValue: 转换px的基准值。
// 例如一个元素宽是75px,则换成rem之后就是2rem。
rootValue: 37.5,
propList: ['*']
}
}
}
注意
:每一次改动src
目录之外的内容需要重启服务
App
:管理所有的组件
-
Layout
:管理首页和搜索 -
Home
:主页SongItem
:负责音乐的布局
-
Search
:搜索页SongItem
:负责音乐的布局
-
Play
:音乐播放 -
Comment
:评论页
Play
和Comment
与Layout
平级,需要的时候直接调用就行
// 引入Vue
import Vue from 'vue'
// 引入路由
import VueRouter from "vue-router"
Vue.use(VueRouter)
// 引入组件
import Layout from '@/views/Layout'
import HomePage from '@/views/Home'
import SearchPage from '@/views/Search'
import Play from '@/views/Play'
import Comment from '@/views/Comment'
const routes = [
{
path: '/',
redirect:'/layout'
},
{
path: '/layout',
redirect: '/layout/home',
component: Layout,
children: [
{
path: 'home',
component: HomePage,
meta: {
title:'首页'
},
},
{
path: 'search',
component: SearchPage,
meta: {
title:'搜索'
},
}
]
},
{
path: '/play',
component:Play
},
{
path: '/comment',
component:Comment
}
]
const router = new VueRouter({ routes })
export default router
//所有api的管理者
import { recommendMusicAPI, newMusicAPI } from "@/api/Home";
import { hotSearchAPI, searchResultAPI } from "@/api/Search";
import { getSongByIdAPI, getLyricByIdAPI } from '@/api/Play'
import { getHotCommentAPI} from '@/api/Comment'
export { recommendMusicAPI,newMusicAPI,hotSearchAPI,searchResultAPI,getSongByIdAPI,getLyricByIdAPI,getHotCommentAPI}
防抖与节流
防抖
:像电梯门一样,每一次有人进来之后,电梯门就会重新计时,最终的记时完成,才会触发,相当于setTimeout
节流
:像英雄的技能一样,触发一次之后要等待一段时间才能继续执行,相当于 setInterval
搜索歌曲避免多次发起请求,使用防抖
实现
样式
:css的动画样式
three.js
:打算引入粒子特效
实现3d音乐效果的(后续需求,一开始未做好规划,不好加了)
评论的刷新与加载
- vant组件库
List 列表
和PullRefresh
结合,List 组件通过loading
和finished
两个变量控制加载状态,当组件滚动到底部时,会触发load
事件并将loading
设置成true
。此时可以发起异步操作并更新数据,数据更新完毕后,将loading
设置成false
即可。若数据已全部加载完毕,则直接将finished
设置成true
即可
Promise
:将异步转换为同步async await
(就近原则使用),等待数据返回之后再继续执行下面的代码
这次主要对vue2
的项目进行锻炼。学习了模块化处理流程,对待不同的功能模块要进行合理的分区,前期一定要做好项目规划处理,后续开始学习vue3
以及three.js