Comprehensive Guide to Setting Up Electron, Exploring Its Source Structure, and Building Sample Desktop Applications

Electron is a cross‑platform development framework built on Chromium and Node.js that allows developers to create desktop applications using HTML, CSS, and JavaScript, offering capabilities that browsers cannot provide such as direct file system access.

Environment Setup

Install Node

Download the stable version from the official Node.js website and optionally switch the 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 vue‑cli is missing or outdated, install or upgrade it globally:

npm install @vue/cli -g

Install Electron

Install Electron globally (or via 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

Electron Source Directory Structure

The source code follows Chromium’s multi‑process layout. Key directories include:

Electron
├── atom               # Electron source
│   ├── app           # Entry point
│   ├── browser       # Main process code (UI, window management)
│   ├── renderer      # Renderer‑process code
│   └── common        # Shared utilities
├── chromium_src      # Copied Chromium code
├── docs, docs‑translations
├── spec               # Automated tests
├── atom.gyp           # Build rules
└── common.gypi        # Build settings for node, breakpad, etc.

Important project‑level directories are src , package.json , and appveyor.yml , plus scripts, tools, vendor, node_modules, out, dist, and external_binaries.

Application Project Directory (electron‑vue Template)

electron-vue : template configuration

build : build scripts

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

node_modules : third‑party dependencies

src : source code (main and renderer)

static : static assets

index.html : application entry page

package.json : dependency manifest

Process Model

Main Process

The main process runs the script defined in package.json (usually background.js ) and creates BrowserWindow instances that host renderer processes.

Renderer Process

Each window’s web page runs in its own renderer process, leveraging Chromium’s multi‑process architecture; with Node.js integration, renderer code can access native OS resources.

Inter‑Process Communication

The main process manages all windows and their lifecycles; each BrowserWindow has a dedicated renderer, and communication occurs via Electron’s IPC modules.

src Directory Structure

The src folder contains two sub‑folders:

main : includes index.js (application entry) and index.dev.js (development helpers).

renderer : holds assets, components, router, store, App.vue , and main.js .

Comprehensive Examples

1. NetEase Cloud Music (electron‑vue‑cloud‑music)

A cross‑platform desktop music player built with Electron, Vue, and Ant Design Vue. Features include drag‑play, desktop lyrics, mini mode, custom tray menu, task‑bar thumbnails, audio visualisation, auto/manual updates, Nedb persistence, custom install path, and more.

2. QQ Music Player

Another Electron‑Vue music player mimicking QQ Music’s UI, using the stack electron‑vue + Vue + Vuex + vue‑router + Element‑UI. Run the project with:

git clone https://github.com/SmallRuralDog/electron-vue-music.git
cd electron-vue-music
npm install
# Development mode
npm run dev
# Build installer
npm run build

Both examples demonstrate how to structure an Electron‑Vue project, manage dependencies, and package the application for distribution.