Electron + Vue 网易云音乐桌面客户端搭建教程

本教程将引导您了解如何搭建并运行 xiaozhu188/electron-vue-cloud-music 这一基于 Electron 和 Vue 的仿网易云音乐桌面应用。

1. 项目的目录结构及介绍

该项目遵循标准的 Vue CLI 3 结构，结合了 Electron 构建桌面应用。以下是主要的目录和它们的作用：

.
├── public       # 存放静态资源，如 index.html
├── src          # 主体源代码目录
│   ├── main      # Electron 的主进程代码
│   │   └── main.js    # 应用的入口文件，启动 Electron 应用
│   ├── renderer  # Vue 组件和页面代码
│   │   ├── components  # 公共组件
│   │   ├── views       # 页面视图
│   │   └── App.vue     # Vue 应用的主要组件
│   ├── assets     # 图片和其他非 JavaScript 资产
│   ├── store      # Vuex 状态管理
│   └── router     # Vue 路由配置
└── ...

2. 项目的启动文件介绍

public/index.html

这是项目的 HTML 入口文件，它被用于构建 Vue 应用的外壳。在浏览器环境中，Vue.js 将挂载到这个文件中的 <div id="app"> 标签上。

src/main/main.js

这是 Electron 应用的主进程入口文件。在这里，你可以初始化 Electron 相关的功能，例如创建浏览器窗口、处理系统事件等。

// 导入 Electron 模块
const { app, BrowserWindow } = require('electron')
// 导入 Vue 对象
const Vue = require('vue')

// 创建应用程序窗口
function createWindow () {
  // ...
}

// 当 Electron 准备好创建浏览器窗口时
app.on('ready', createWindow)

src/renderer/App.vue

这是 Vue 应用的核心组件，包含了整个应用的基本布局。其他组件作为子组件在这个组件内嵌套。

<template>
  <div id="app">
    <!-- 应用的内容 -->
  </div>
</template>

<script>
export default {
  name: 'App',
  // ...
}
</script>

3. 项目的配置文件介绍

.env.development, .env.production

这些文件用于设置环境变量。.env.development 在开发阶段使用，.env.production 在生产环境使用。例如，设置 API 地址或密钥。

vue.config.js

这是 Vue CLI 的自定义配置文件，可以在此配置一些构建选项，比如公共路径、代理服务器等。

module.exports = {
  configureWebpack: {
    // ...
  },
  pluginOptions: {
    electronBuilder: {
      // ...
    }
  }
}

package.json

这个文件包含了项目元数据以及脚本命令，如启动开发服务器(npm run dev)、打包应用(npm run build)等。

{
  "scripts": {
    "dev": "vue-cli-service electron:serve",
    "build": "vue-cli-service electron:build"
  },
  "dependencies": {
    // ...
  },
  "devDependencies": {
    // ...
  }
}

通过以上介绍，你现在应该对这个项目有了基本的理解。接下来，按照以下步骤开始你的开发之旅：

1. 使用 Git 克隆项目：git clone https://github.com/xiaozhu188/electron-vue-cloud-music.git
2. 安装依赖：cd electron-vue-cloud-music && npm install
3. 启动开发环境：npm run dev
4. 编辑源码并观察实时更新。
5. 当准备发布时，执行 npm run build 来构建生产版本。

祝你开发愉快！如有疑问，请查阅官方文档或在项目仓库中寻求帮助。