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:

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

Install/Upgrade Vue CLI

Check the installed version: vue -V If missing or outdated, install or upgrade:

npm install @vue/cli -g

Install Electron

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

npm install -g electron
# or
cnpm install -g electron

Verify the installation:

electron --version

Create and Run a Project

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

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

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:

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

Both examples include screenshots of the running applications.