前言
为了学习vite和熟悉vue3语法,做了这个仿网易云音乐的h5,欢迎大家的讨论。
预览效果
地址
技术栈
- vue3 + vue-router4 + vuex4
- vant3 (ui框架)
- typescript
目录结构
├── README.md
├── dist
│ ├── assets
│ ├── favicon.ico
│ └── index.html
├── hosts
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── postcss.config.js
├── proxy.ts
├── public
│ └── favicon.ico
├── src ---src
│ ├── App.vue
│ ├── api --- 接口和axios封装
│ ├── assets
│ ├── components --- 组件
│ ├── main.ts
│ ├── page
│ ├── router --- 路由
│ ├── shims-vue.d.ts
│ ├── store --- 数据状态管理
│ └── utils --- 公共方法
├── tsconfig.json
└── vite.config.ts --- 配置文件
功能
- 项目整体结构搭建
- axios封装
- 代理配置
- 项目部署(部署到vercel)
- eslint/prettierrc配置
autoprefixer
配置
说明
此次功能仅实现了 推荐列表、歌单页、小播放器三块功能,但后续我暂时没有接着完善功能的想法,因为
- 麻雀虽小,五脏俱全,作为一个音乐类的h5,其最小的逻辑已经完成
- 我的目标已经达到,我希望学到的vite和vue3全家桶已经全部用到,后续接着完善功能对我个人而言手艺不是很大了。
期待下次接着完善这个项目的契机
感谢
最后感谢Binaryify大佬的开源项目NeteaseCloudMusicApi,让我有接口可以直接用,专心搞前端