# 网易云音乐

**Repository Path**: wa-da-sheng-dao_0/vue3-electron-netease-cloud

## Basic Information

- **Project Name**: 网易云音乐
- **Description**: 网易云音乐，使用vue3+electron开发，界面精美，仍在积极更新🚀
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 192
- **Forks**: 54
- **Created**: 2022-07-20
- **Last Updated**: 2025-07-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: js-ts-vue3-electron

## README

> 这个仓库不在支持，转移至 https://github.com/1727533196/Music

# Vue3 + TypeScript + Vite + Electron
## 如有任何问题请创建issues

### 在这里提供了一个逐字歌词的npm包
https://www.npmjs.com/package/@lrc-player/core

## 安装

### 1. 安装本地服务器
git clone https://gitlab.com/Binaryify/NeteaseCloudMusicApi.git

```
1. 安装依赖
npm/yarn install
2. 启动服务
npm/yarn start

这个服务器默认端口号应该是3000
```

### 2. 启动 cloud
```
1. 需要 Node.js 版本至少 20+

2. 安装依赖
pnpm install

3. 启动服务
pnpm dev

4. 打包应用
electron-win: pnpm build:win
electron-mac: pnpm build:mac
electron-linux: pnpm build:linux


默认请求端口号为3006, 可以在.env 文件中更改VITE_APP_WEB_URL
    例如服务器端口号为3000，就把VITE_APP_WEB_UR改为3000
```

### 3. 登录
```
1. 使用网易云音乐APP扫码登录
```


# 请求器
````
当父组件通过模板 ref 的方式获取到当前组件的实例，获取到的实例会像这样 { a: number, b: number } (ref 会和在普通实例中一样被自动解包)
项目里集成了components文件下自动引入,您可以无需引入直接使用即可（推荐引用,这样可以让ts更好的识别类型）

vite 提供了两种模式：具有开发服务器的开发模式（development）和生产模式（production）
组件中使用：
console.log(import.meta.env.VITE_APP_WEB_URL)

请求器一共有四种调用方式   配置型请求默认为get，其余三种默认都为post
  <R extends unknown, D>(config: AxiosRequestConfig & {data: R, params: R}): Promise<D>;
  <R extends unknown, D>(url: string, method?: Method, config?: AxiosRequestConfig & {data: R, params: R}): Promise<D>;
  <R extends unknown, D>(url: string, data: R, method?: Method): Promise<D>;
  <R extends unknown, D>(url: string, data: R, config?: AxiosRequestConfig): Promise<D>;

重写了audio的play和pause，让他们具有音量过渡效果
    开始播放的过渡时间比暂停长一点，这样效果感觉会更好些
````

# 引用
````
在全局上暴露了播放器的组件实例, $audio, 它被挂在到了window上
你可以调用其暴露出来的部分方法, 例如: play、pause、el、isPlay等等...

````

# 一些效果图...
![img.png](public/demo-images/img_0.png)
![img_1.png](public/demo-images/img_1.png)
![img_1.png](public/demo-images/img_2.png)
![img_1.png](public/demo-images/img_3.png)
![img_1.png](public/demo-images/img_4.png)
![img_1.png](public/demo-images/img_5.png)


# Electron API
```
win.maximize() // 最大化窗口
win.unmaximize() // 取消最大化窗口
win.minimize() // 最小化窗口
win.restore() // 将窗口从最小化状态还原到其以前的状态
win.close() // 尝试关闭窗口。这与用户手动单击窗口的关闭按钮具有相同的效果
```