%20(2).svg)
项目简介
本项目是学习 TypeScript 和 React 时的练手项目，实现了音乐播放相关的基础功能。虽有部分功能待完善，但已能实现首页数据展示、音乐播放与歌词匹配等核心功能。
项目的主要特性和功能
- 首页数据展示：可展示音乐的相关信息。
- 音乐点击播放：支持用户点击歌曲进行播放。
- 音乐拖动播放与歌词匹配：能通过拖动进度条控制播放进度，并同步显示对应歌词。
安装使用步骤
安装依赖
进入项目根目录，执行命令 npm install 安装项目所需依赖。
运行项目
依赖安装完成后，执行命令 npm run start 启动项目。
路径配置（可选）
若需配置路径，按以下步骤操作：
1. 安装依赖：npm install @craco/craco
2. 在根路径下创建 craco.config.js，内容如下：
js
const path = require("path")
module.exports = {
webpack:{
alias:{
"@":path.resolve(__dirname,"src")
}
}
}
3. 修改 package.json 文件的 script 字段：
js
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
4. 在 tsconfig.json 中配置：
json
// 在"jsx": "react-jsx",后添加
"baseUrl": ".",
"paths": {
"@/*":[
"src/*"
]
}
5. 重启项目
CSS 样式重置
安装并导入 npm install normalize.css，同时可在 /assets/css/reset.less 中配置自定义的 CSS 重置样式。
代码风格配置
- 设置
.editorconfig统一代码风格： ```plaintext
root = true
[*] # 表示所有文件使用 charset = utf-8 indent_style = space #缩进风格 indent_size = 2 #缩进大小 end_of_libe = lf # 控制换行类型 trim_trailing_whitespace = true # 去除行尾空白字符 insert_final_newline = true # 始终在文件末尾插入一个新行
[*.md] # 表示仅对md文件应用以下规则
max_line_length = off
trim_trailing_whitespace = false
2. 配置 Prettier 格式化工具：
- 安装：`npm install prettier -D`
- 配置 `.prettierrc`：json
{
"useTabs": false,
"tabWidth": 2,
"printWidth": 80,
"singleQuote": true,
"trailingComma": "none",
"semi": false
}
``
3. 使用 ESLint 检测：
- 安装：npm install eslint -D`
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】