/SaltPlayerConverterFrontEnd

前后端重构版：前端仓库。从网易云音乐、QQ音乐等在线音乐平台，获取歌单，并转换成椒盐音乐可识别的歌单格式，方便用户快速跨平台迁移歌单。Refactored version: front-end repository. From online music platforms such as NetEase Cloud Music, QQ Music, etc., get the song list and convert it to Salt Player recognisable song list format, which is convenient for users to migrate the song list quickly and cross-platform.

Primary LanguageVueMIT LicenseMIT

中文 / English

cover

椒盐歌单助手

前后端重构版——前端仓库

项目介绍

原项目前后端重构版的前端代码仓库。

项目功能的使用教程在原项目的README，本README只包含如何自行运行本项目。

重构版 后端仓库：SaltPlayerConverterBackEnd

需要使用的硬件与软件

必须：

  • Node.js 18.18.0 及以上版本（我使用的是18.18.0 LTS）
  • 现代的浏览器，如Chrome、Edge、Firefox等

可选：

  • 电脑或其他中大屏（普通平板大小及以上）横屏设备

项目的使用与运行（二选一即可）

1. 使用Web IDE（如WebStorm等）从源码运行

  1. 使用IDE或者git克隆或下载本项目的源码。
git clone git@github.com:Winnie0408/SaltPlayerConverterFrontEnd.git
  1. 使用Web IDE打开本并信任项目。
  2. 稍等一会儿，点击右下角弹出气泡中的运行npm install按钮（推荐更换npm的镜像源为淘宝，以提高下载速度），等待依赖下载完成。
  3. 修改src/main.ts文件的axios.defaults.baseURL配置，更改为后端服务器的IP+端口。
    • 如果是前后端在同一台电脑上运行，则修改为localhost:8082。
    • 如果是前后端在不同的电脑上运行，则修改为后端服务器的局域网IP+端口（如192.168.1.123:8082）。
  4. 打开项目中的package.json文件，点击scripts中dev前的绿色三角按钮，运行项目。
  5. 等待项目启动，浏览器会自动打开项目的主页。
    • 如果没打开，则手动打开浏览器，输入localhost:5173，回车，即可打开页面。
    • 如果您使用CLI来运行前端服务：
      • 如果您在同一台电脑上运行前端服务、访问前端页面，则需要使用带有桌面环境系统的现代浏览器打开localhost:5173。
      • 如果您在不同的电脑上运行前端服务、访问前端页面，则需要使用带有桌面环境系统的现代浏览器打开后端服务器的局域网IP+端口（如192.168.1.123:5173）。

2. 使用npm从源码运行

  1. 克隆或下载本项目的源码。
git clone git@github.com:Winnie0408/SaltPlayerConverterFrontEnd.git
  1. 修改src/main.ts文件的axios.defaults.baseURL配置，更改为后端服务器的IP+端口。
    • 如果是前后端在同一台电脑上运行，则修改为localhost:8082。
    • 如果是前后端在不同的电脑上运行，则修改为后端服务器的局域网IP+端口（如192.168.1.123:8082）。
  2. 进入项目目录，使用npm下载依赖。（推荐更换npm的镜像源为淘宝，以提高下载速度）。
npm install
  1. 等待依赖下载完成后，使用npm运行项目。
npm run dev
  1. 等待项目启动，浏览器会自动打开项目的主页。
    • 如果没打开，则手动打开浏览器，输入localhost:5173，回车，即可打开页面。
    • 如果您使用CLI来运行前端服务：
      • 如果您在同一台电脑上运行前端服务、访问前端页面，则需要使用带有桌面环境系统的现代浏览器打开localhost:5173。
      • 如果您在不同的电脑上运行前端服务、访问前端页面，则需要使用带有桌面环境系统的现代浏览器打开后端服务器的局域网IP+端口（如192.168.1.123:5173）。

配置npm镜像源

在任意位置打开终端（命令行），输入以下命令：

npm config set registry https://registry.npmmirror.com

赞助与支持

🥰🥰🥰

如果这个项目对您有所帮助，您可以给我一颗免费的⭐，或者请我喝杯咖啡！
非常感谢您的支持！
⬇️⬇️⬇️
Sponsorship.jpg