Mastering Electron: From Environment Setup to Source Code Structure

Why Choose Electron?

Although B/S web apps dominate, C/S desktop applications still have a large market because they can read/write local files and access system resources beyond the browser sandbox. Electron combines Chromium and Node.js, allowing developers to build cross‑platform desktop apps with HTML, CSS, and JavaScript.

Environment Setup

Install Node

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

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

Install/Upgrade vue‑cli

vue -V

npm install @vue/cli -g

Install Electron

npm install -g electron

cnpm install -g electron

electron --version

Create and Run a Project

Clone the official quick‑start repository and start it:

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

cd electron-quick-start

npm install

npm start

The running application looks like the screenshot below.

You can also scaffold a project with vue init simulatedgreg/electron-vue and then install dependencies with npm install, running the app via npm run dev or npm run build.

Electron Source Directory

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

Electron
├── atom – core source
│   ├── app
│   ├── browser – main‑process UI and window management
│   ├── renderer – code running in each web page
│   └── common – shared utilities
├── chromium_src – copied from Chromium
├── docs – documentation
├── spec – automated tests
└── …

Important project folders are src, package.json, and appveyor.yml. Additional directories such as script, tools, vendor, node_modules, out, dist, and external_binaries support building, packaging, and testing.

Application Structure (electron‑vue)

The generated project mirrors typical front‑end layouts:

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

Inside src you mainly work in the main and renderer directories.

Main Process

The main process runs the script defined in package.json (usually background.js). It creates BrowserWindow instances, manages windows, and is the only process that can control the application lifecycle.

Renderer Process

Each window runs its own renderer process, powered by Chromium. It can use Node.js APIs, allowing direct interaction with the operating system.

IPC (Inter‑Process Communication)

The main process creates pages via BrowserWindow. When a window is destroyed, its renderer process terminates. Communication between main and renderer processes is handled through Electron’s IPC modules.

src Directory Details

main contains index.js (the entry point for the main process) and index.dev.js (development‑only setup with debugging tools).

renderer holds the front‑end code: assets, components, router, store, App.vue, and main.js.

Sample Projects

1. NetEase Cloud Music – an Electron‑Vue app with features like drag‑play, desktop lyrics, mini mode, custom tray menu, and more.

2. QQ Music Player – built with electron‑vue, Vuex, Vue‑router, and Element‑UI, demonstrating typical project commands:

git clone https://github.com/SmallRuralDog/electron-vue-music.git

cd electron-vue-music

npm install

npm run dev   # development mode

npm run build # package for distribution

Both projects showcase rich UI interactions, database persistence, auto‑updates, and cross‑platform packaging.