Master Electron: From Setup to Real-World Desktop Apps with Vue

Environment Setup

Before creating an Electron cross‑platform app, install Node.js, Vue CLI, and Electron.

Install Node

Download the stable version from the official site. If using Homebrew, switch npm registry to the Taobao mirror:

<code>npm config set registry http://registry.npm.taobao.org/
# or
npm install -g cnpm --registry=https://registry.npm.taobao.org</code>

Install/Upgrade Vue CLI

Check the installed version:

<code>vue -V</code>

If missing or outdated, install or upgrade:

<code>npm install @vue/cli -g</code>

Install Electron

Install the Electron package globally (using npm or cnpm):

<code>npm install -g electron
# or
cnpm install -g electron</code>

Verify the installation:

<code>electron --version</code>

Create and Run a Project

Clone the official quick‑start repository and start the app:

<code>git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start</code>

The app launches showing a simple Electron window.

Electron Source Directory

The Electron source follows Chromium’s multi‑process architecture. Key directories include

atom

(main source),

chromium_src

,

docs

, and build scripts. Important subfolders are

app

,

browser

,

renderer

, and

common

, each containing JavaScript and platform‑specific code.

Application Project Directory

An Electron‑Vue project mirrors typical front‑end structures:

electron-vue – template configuration

build – build scripts

config – project configuration (e.g., port forwarding)

node_modules – dependencies

src – source code

static – static assets

index.html – entry page

package.json – dependency list

Within

src

, the

main

folder holds

index.js

(the main process entry) and

index.dev.js

(development helpers). The

renderer

folder contains assets, components, router, store,

App.vue

, and

main.js

.

Main Process

The main process runs the script defined in

package.json

(usually

background.js

) and creates

BrowserWindow

instances that host the UI. Each Electron app has exactly one main process.

Renderer Process

Each web page runs in its own renderer process, powered by Chromium. Unlike browsers, Electron allows Node.js APIs in the renderer, enabling direct OS interaction.

Communication

The main process creates windows via

BrowserWindow

. When a window is closed, its renderer process terminates. The main process manages all windows and their lifecycles, while each renderer operates independently.

Comprehensive Examples

1. NetEase Cloud Music

The

electron-vue-cloud-music

project demonstrates a cross‑platform desktop music player built with Electron, Vue, and Ant Design Vue. Features include drag‑play, desktop lyrics, mini mode, custom tray menus, task‑bar thumbnails, audio visualisation, auto‑update, Nedb persistence, and more. The repository is at github.com/xiaozhu188/electron-vue-cloud-music .

2. QQ Music Player

This player mimics the QQ Music UI using the stack electron‑vue + Vue + Vuex + Vue‑router + Element‑UI. To run:

<code>git clone https://github.com/SmallRuralDog/electron-vue-music.git
cd electron-vue-music
npm install
# development mode
npm run dev
# package for distribution
npm run build</code>

Both examples include screenshots of the running applications.