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

Although B/S architecture dominates modern development, C/S still has a large market demand because desktop applications can read/write local files and access more system resources, making Electron—a framework based on Chromium and Node.js that uses HTML, CSS, and JavaScript—a popular cross‑platform solution.

Environment Setup

Before creating an Electron application, install common tools such as Node, Vue, and Electron.

Install Node

Download the stable version from the Node website (http://nodejs.cn/download/) and, if using Homebrew, 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/Upgrade vue‑cli

Check the installed version:

vue -V

If missing or outdated, install or upgrade:

npm install @vue/cli -g

Install Electron

npm install -g electron
或者
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 running result is shown in the following screenshot:

Alternatively, use the vue‑cli scaffolding tool:

vue init simulatedgreg/electron-vue

After selecting options, install dependencies and run the template:

npm install
npm run dev   // or npm run build

Result screenshots are provided.

Electron Source Directory

The source code follows Chromium’s multi‑process architecture. Key directories include src , package.json , and appveyor.yml . Additional important folders are script , tools , vendor , node_modules , out , dist , and external_binaries .

Application Project Structure

Using the electron‑vue template, the project layout resembles a typical front‑end project:

electron‑vue: template configuration

build: build scripts

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

node_modules: dependencies

src: source code (main work area)

static: static assets

index.html: entry page

package.json: dependency definitions

Within src , the main directory contains index.js (application entry) and index.dev.js (development utilities). The renderer directory holds assets, components, router, store, App.vue , and main.js .

Process Model

Electron applications consist of three core modules:

Main Process : runs the script defined in package.json (e.g., background.js ), creates BrowserWindow instances, and manages all windows.

Renderer Process : each window runs in its own renderer process using Chromium’s multi‑process architecture, allowing Node.js APIs for native interactions.

Inter‑Process Communication : the main process creates pages via BrowserWindow ; destroying a window terminates its renderer process. Communication occurs through Electron’s IPC mechanisms.

Comprehensive Examples

1. electron‑vue‑cloud‑music : a cross‑platform desktop music player built with Electron, Vue, and Ant Design Vue. Features include drag‑drop playback, desktop lyrics, mini mode, custom tray menu, task‑bar thumbnails, audio visualization, auto/manual updates, Nedb persistence, custom install path, and more.

2. qq‑music‑player : a QQ‑style music player based on electron‑vue, Vuex, Vue‑router, and Element‑UI. Run 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 include screenshots of the running applications.