Electron Cross‑Platform Development Guide: Environment Setup, Project Structure, and Sample Applications

Although B/S (browser‑server) architecture dominates modern web development, C/S (client‑server) still has a large market because desktop applications can bypass browser sandbox restrictions, read/write local files, and access system resources. Electron combines Chromium and Node.js, allowing developers to write cross‑platform desktop apps with HTML, CSS, and JavaScript.

Environment Setup

Install Node.js from the official site, then configure the npm registry to the Taobao mirror:

npm config set registry http://registry.npm.taobao.org/

npm install -g cnpm --registry=https://registry.npm.taobao.org

Install or upgrade vue-cli :

vue -V

npm install @vue/cli -g

Install Electron globally (or via cnpm ):

npm install -g electron

cnpm install -g electron

Verify the installation:

electron --version

Creating a Project

Clone the official quick‑start repository and run it:

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

cd electron-quick-start

npm install

npm start

Alternatively, use the electron‑vue template:

vue init simulatedgreg/electron-vue

After selecting the options, install dependencies and start the app:

npm install

npm run dev

npm run build

Electron Source Directory Overview

Electron
├── atom - Electron source code
│   ├── app
│   ├── browser
│   │   ├── lib
│   │   ├── ui
│   │   │   ├── cocoa
│   │   │   ├── gtk
│   │   │   └── win
│   │   ├── default_app
│   │   ├── api
│   │   │   └── lib
│   │   ├── net
│   │   ├── mac
│   │   └── resources
│   ├── renderer
│   │   ├── lib
│   │   └── api
│   │       └── lib
│   └── common
│       ├── lib
│       └── api
│           └── lib
├── chromium_src
├── docs
├── docs-translations
├── spec
├── atom.gyp
└── common.gypi

The most frequently edited directories are src , package.json , and appveyor.yml . Additional important folders include script , tools , vendor , node_modules , out , dist , and external_binaries .

Application Project Structure (electron‑vue)

electron‑vue: template configuration

build: build scripts

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

node_modules: dependencies

src: source code main: contains index.js (entry for Electron) and index.dev.js (development helpers) renderer: contains assets, components, router, store, App.vue , and main.js

static: static resources

index.html: single HTML entry page

package.json: project metadata and dependencies

The application consists of three core modules:

Main Process : runs the script defined in package.json (usually background.js ), creates BrowserWindow instances, and manages application lifecycle. There is exactly one main process per Electron app.

Renderer Process : each window runs its own renderer process using Chromium. It can access Node.js APIs, allowing deeper OS integration than a regular browser.

Inter‑Process Communication (IPC) : the main process creates windows via BrowserWindow ; each window runs in its own renderer process. When a window is destroyed, its renderer process terminates. The main process coordinates all windows and their renderers.

Sample Projects

1. NetEase Cloud Music – an Electron‑Vue desktop client featuring drag‑drop playback, desktop lyrics, mini‑mode, custom tray menus, audio visualisation, auto‑update, and Nedb persistence. Repository: github.com/xiaozhu188/electron-vue-cloud-music

2. QQ Music Player – built with electron‑vue , Vue, Vuex, Vue‑router, and Element‑UI. Run it with:

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 demonstrate how Electron enables rich, native‑like desktop experiences using familiar web technologies.