# cloud-music
这是一个主要基于Vue3+TypeScript+Vite构建的高仿网易云pc端的音乐流媒体网站.
### 前言
为了探索最前沿的前端技术栈, 一切为了好玩, 肝代码不易,觉得喜欢的可以点个star,本项目仅供参考学习.
谢谢大家star.
### 常见问题
由于网易云服务器限制,加上ffmpeg需要设置COOP和COEP 导致获取媒体资源和图片会存在跨域问题, 可以使用Allow CORS: Access-Control-Allow-Origin 这个插件来解决, 使用项目部署在vercel,导致需要使用vpn访问, 导致图片和音频可能无法加载, 在clash添加一条规则 将music.126.net, 类型选择DOMAIN-KEYWORD 域名设置成直连.
### 项目部署
本项目预览地址采用vercel部署, 推荐大家使用vercel部署, 部署步骤非常简单, fork本仓库,在vercel中导入该仓库,按照提示点击部署即可.
### 主要技术栈如下
1. [Vue3](https://vuejs.org/): 用于快速构建web用户界面的框架.
2. [naive-ui](https://www.naiveui.com/zh-CN/light): 基于Vue3的组件库,可自定义主题,支持夜间模式.
3. [Vite](https://vitejs.dev/): 下一代的前端构建工具,支持HRM,TypeScript,JSX,开箱即用.
4. [axios](https://axios-http.com/): 是用于浏览器和node.js的基于Promise的http库,用于请求Api.
5. [dayjs](https://day.js.org/): 轻量级,用于处理时间相关格式化问题的库.
6. [color.js](https://www.npmjs.com/package/color.js): 用于不可变颜色的转换和操作的JavaScript库.
7. [eslint](https://eslint.org/): 基于AST模式的JavaScript代码风格检查工具.
8. [lodash](https://lodash.com/docs/): 实用JavaScript工具函数库,提供了类似防抖节流,深拷贝开箱即用的函数.
9. [nanoid](https://github.com/ai/nanoid/blob/main/README.zh-CN.md): 小型的安全的,用于生成唯一字符串id的JavaScript库.
10. [normalize.css](https://github.com/necolas/normalize.css): 一个用于现代化的重置css的库,用于磨平各个浏览器之间不同样式的兼容问题.
11. [pinia](https://pinia.vuejs.org/): 基于Proxy使用TypeScript编写的灵活的且类型安全的下一代Vue状态管理库.
12. [qs](https://www.npmjs.com/package/qs): 安全的用于字符串序列化的库,通常用于处理请求参数.
13. [rgbaster](https://www.npmjs.com/package/rgbaster): 基于Promise的JavaScript库,用于从图像中提取主色.
14. [vue-router4](https://router.vuejs.org/zh/introduction.html): 基于Vue3路由管理库
15. [vue-virtual-scroller](https://github.com/Akryum/vue-virtual-scroller): 基于Vue的虚拟滚动JavaScript库.
16. [xgplayer](https://v2.h5player.bytedance.com/): 西瓜播放器(HTML5),带解析器,能节省流量 提供开箱即用的HTML5视频播放器库
17. [tailwindcss](https://tailwindcss.com/): 基于原子化css的实用程序优先的css框架,用于快速构建自定义用户界面.
## 功能亮点如下
18. 基于图片主色混入的canvas渐变背景
19. 歌曲随机,顺序,单曲循环播放.切换播放上一首,下一首.
20. 自定义封装歌曲进度条,可点击拖拽切换到指定播放时间, 添加buffer加载进度显示.
21. 歌词自动同步滚动高亮,滚动选择歌词切换播放时间, 歌词逐字播放.
22. 歌词底部头部基于当前所在滚动位置背景色添加虚化渐变遮罩.
23. 歌曲播放或暂停时cd旋转或停止旋转.
24. 兼容夜间模式,骨架屏加载显示.
25. 歌单内部搜索歌曲,收藏歌单,编辑歌单,新建歌单.
26. 添加喜欢的音乐,获取我创建的歌单和收藏的歌单.
27. 歌单列表下拉加载.
28. 自定义图片懒加载,缓冲loading显示.
29. 扫码登录,编辑用户信息,签到.退出登录.
30. 记忆当前滚动位置.刷新页面时更新滚动位置.
31. 搜索歌曲或歌单,提供搜索建议.搜索历史记录缓存.
32. mv列表,播放mv
33. 评论列表,点击评论,回复评论,添加评论.发表评论
34. 基于ffmpeg-wasm和IndexedDB缓存压缩歌曲数据到本地,实现离线播放.
## 项目预览
![](https://upload-images.jianshu.io/upload_images/24914540-3610a62506e089c7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![](https://upload-images.jianshu.io/upload_images/24914540-f75bd93f493a0630.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![](https://upload-images.jianshu.io/upload_images/24914540-3037f3b2061af382.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![](https://upload-images.jianshu.io/upload_images/24914540-33da12dc895b574a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![](https://upload-images.jianshu.io/upload_images/24914540-282aa2c065314f7a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![](https://upload-images.jianshu.io/upload_images/24914540-6e666b06fa902d43.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![](https://upload-images.jianshu.io/upload_images/24914540-1d77d01057781aaf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![](https://upload-images.jianshu.io/upload_images/20032554-89d3aae105f66885.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![](https://upload-images.jianshu.io/upload_images/20032554-e5898c2b509dabea.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
## 项目运行
推荐使用pnpm安装依赖,推荐node版本14.18+, 16+。
建议使用nvm管理不同node版本,nvm安装前建议卸载当前已经安装的node。
### nvm仓库
在首页点击Releases进入版本页面,下载最新版本即可
https://github.com/coreybutler/nvm-windows
### pnpm 安装
```shell
npm i pnpm -g
```
### 依赖安装
```shell
pnpm i
```
### 运行
```shell
pnpm dev
```
### 构建
```shell
pnpm build
```
### 预览
```shell
pnpm preview
```
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
云音乐这是一个主要基于Vue3+TypeScript+Vite构建的高仿网易云pc端的音乐流媒体网站。前言为了探索最前沿的前端技术栈,为了好玩,肝代码不易,觉得喜欢的可以点个star,本项目仅供参考学习。 谢谢各位明星。常见问题由于网易云服务器限制,加上 ffmpeg 需要设置 COOP 和 COEP 导致获取媒体资源和图片会存在跨域问题,可以使用Allow CORS: Access-Control-Allow-Origin 这个插件来解决,在 vercel 使用部署项目,导致需要使用vpn访问,导致图片和音频可能无法加载,在clash添加一条规则将music.126.net,类型选择DOMAIN-KEYWORD域名设置成直连。项目部署本项目预览地址采用vercel部署,推荐大家使用vercel部署,部署步骤非常简单,fork本仓库,在vercel中导入该仓库,按照提示点击部署即可。主題廢棄栈Vue3用于快速构建web用户界面的框架。naive-ui基于Vue3的组件库,可自定义主题,支持夜间模式。Vite下一代的基础架构工具,支持HRM、T
资源推荐
资源详情
资源评论
收起资源包目录
基于Vue3+Vite+TypeScript+compositionApi+naiveui构建的精致的支持夜间模式网易云音乐流媒体网站webApp.zip (109个子文件)
.eslintrc.cjs 4KB
transition.css 2KB
index.css 842B
common.css 633B
base.css 36B
.gitignore 327B
index.html 3KB
favicon.ico 4KB
formateLocaltion.js 2KB
tailwind.config.js 708B
alias.config.js 111B
postcss.config.js 81B
location.json 142KB
region.json 27KB
package.json 2KB
settings.json 944B
tsconfig.app.json 783B
tsconfig.node.json 593B
vercel.json 266B
extensions.json 192B
.prettierrc.json 129B
tsconfig.json 119B
README.md 6KB
play-bar.png 6KB
.prettierignore 55B
main.ts 13KB
lyric.ts 6KB
index.ts 5KB
initIndexDb.ts 5KB
playlist.ts 3KB
user.ts 2KB
useBlurLineGradient.ts 2KB
useMemoryScrollTop.ts 2KB
index.ts 2KB
useMemorizeRequest.ts 2KB
state.ts 2KB
songs.ts 2KB
markSearhKeyword.ts 2KB
useThemeStyle.ts 1KB
useDbClickPlay.ts 1KB
env.d.ts 946B
mv.ts 927B
vite.config.ts 878B
search.ts 723B
useLazyLoad.ts 707B
request.ts 693B
getPixelColor.ts 657B
obverser.ts 652B
login.ts 606B
useValidateVipSong.ts 535B
useAudioLoadProgress.ts 487B
main.ts 449B
useHistoryRoutePath.ts 440B
index.ts 414B
useNanoid.ts 389B
arr-map.ts 355B
useCheckLogin.ts 267B
album.ts 140B
vite-env.d.ts 136B
constant.ts 67B
store.ts 10B
资源内容.txt 1KB
标签.txt 50B
SongListDetail.vue 18KB
FooterPlayer.vue 17KB
MusicDetail.vue 16KB
MusicLyric.vue 14KB
LayoutHeaderSearch.vue 12KB
MvDetail.vue 11KB
LoadImg.vue 9KB
UserInfoEdit.vue 9KB
LayoutLeftMenu.vue 8KB
LayoutHeader.vue 7KB
SearchResult.vue 7KB
RecommendSongListView.vue 6KB
MusicList.vue 6KB
DiscoveryView.vue 5KB
LatestMusicView.vue 5KB
SubscribePlayListModal.vue 5KB
RotateCd.vue 5KB
SliderBar.vue 5KB
EditSongList.vue 4KB
PlayList.vue 4KB
LoginModal.vue 4KB
CommentList.vue 4KB
LatestMvView.vue 3KB
SelectSongListTagModal.vue 3KB
RepliedCommentModal.vue 2KB
ListLoading.vue 2KB
SongList.vue 2KB
MvListImgItem.vue 2KB
HeartIcon.vue 2KB
VideoPlayer.vue 2KB
RandomIcon.vue 2KB
SingleLoop.vue 2KB
PlayAllButton.vue 1KB
CategoryTab.vue 1KB
App.vue 1KB
MvList.vue 1005B
Layout.vue 904B
共 109 条
- 1
- 2
资源评论
徐浪老师
- 粉丝: 8256
- 资源: 1万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功