music-pc
项目简介
基于vue3+vite+typescript开发的仿网易云音乐web-pc端，不使用任何UI框架，所有组件和样式均自主开发。
技术栈
- vite v2: vite构建工具
- vue v3.0.5: vue3全家桶
- typescript v4.1.5: javascript的超集
- axios: 基于promise的HTTP库
- dayjs: 一个轻量的处理时间和日期的库
- NeteaseCloudMusicApi: 开源的NodeJS版api接口
已完成功能
-
推荐页面
- 轮播图
- 热门推荐
- 入驻歌手
- 新碟上架
- 榜单
-
排行榜页面
- 榜单列表
- 榜单详情
- 榜单评价（分页）
-
歌单页面
- 歌单分类
- 歌单列表（分页）
-
歌单详情页面
- 歌曲列表
- 歌单评价（分页）
-
歌手列表页面
- 歌手分类
- 首字母筛选
- 歌手列表
-
歌手详情页面
- 歌曲列表
-
新碟上架页面
- 专辑分类
- 专辑列表（分页）
-
歌曲播放
- 只要有歌曲列表的地方，都可以直接点击播放
- 底部播放
- 歌曲控制（暂停、播放、上一首、下一首）
- 歌词解析、展示、滚动
- 播放列表
项目规范
- 所有组件的文件夹命名和文件命名用大驼峰，出口文件使用index命名；
- 插件命名使用大驼峰，其他所有文件和文件夹均使用小驼峰；
- 样式通过scss编写，所有的css类名全部小写，并用-连接；
- 全局类型声明和静态数据类型声明在typings文件夹中，各模块对应的类型声明在各模块的typing.ts中编写；
- 网络请求相关封装和api接口管理、数据处理都在apis文件夹中；
- 工具方法统一放在utils文件夹中，再分类管理；
- 插件统一放在plugins文件夹中；
- 自定义hooks统一放在hooks文件夹中；
- 页面组件和业务模块组件统一放在pages文件夹中，页面组件作为容器组件，用于处理数据、逻辑和布局，业务模块组件是对应页面的UI组件，只负责UI不负责逻辑；
- 通用组件和其它UI组件统一放在components中；
- 组件内部书写顺序：
- 定义响应式数据（ref，reactive）
- 解构自定义hooks
- 定义computed
- 生命周期函数
- 其他逻辑代码
- watch和watchEffect
- vuex规范：
- 每个页面模块有自己独立的vuex模块，在store文件夹中模块化管理
- state、mutations、getters、actions分离，在index中导入
- 事件类型，在actionTypes中管理
项目运行
clone项目
git clone https://github.com/sanjings/vue3-vite-ts-music.git
安装依赖（推荐使用pnpm）
npm install pnpm -g
pnpm install
本地运行
yarn dev or npm run dev
打包
yarn build or npm run build
最后
欢迎pr，喜欢就赏个