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

Although B/S architecture dominates modern development, C/S applications still have significant market demand because they can bypass browser sandbox restrictions, access local files, and utilize system resources, making Electron—a framework built on Chromium and Node.js—an attractive choice for cross‑platform desktop apps.

Environment Setup

Install Node.js from the official site (prefer the stable version) and optionally configure 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

Verify the Vue‑CLI version and install/upgrade it if necessary:

vue -V
npm install @vue/cli -g

Install Electron globally (or via cnpm):

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

Confirm the installation:

electron --version

Creating and Running a Project

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

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

Alternatively, use the electron‑vue scaffolding tool:

vue init simulatedgreg/electron-vue

After selecting the desired options, install dependencies and run the project:

npm install
npm run dev   # development mode
npm run build # production build

Electron Source Directory Overview

The Electron source is organized similarly to Chromium, with key folders such as atom (core code), chromium_src , docs , spec , and build scripts. Important sub‑directories include app , browser , renderer , and common , each containing JavaScript, UI, and API implementations.

Application Project Structure

A typical electron‑vue project contains directories like electron‑vue , build , config , node_modules , src , static , plus entry files index.html and package.json . The src folder holds the actual source code, split into main (e.g., index.js , index.dev.js ) and renderer (assets, components, router, store, App.vue , main.js ).

Process Model

Electron apps consist of three core modules:

Main Process : runs the script defined in package.json (usually background.js ), creates BrowserWindow instances, and manages application lifecycle.

Renderer Process : each window runs its own Chromium renderer process, allowing web pages to access Node.js APIs.

IPC (Inter‑Process Communication) : the main process communicates with renderer processes via Electron’s IPC mechanisms.

Sample Projects

1. NetEase Cloud Music – an Electron‑Vue desktop music player featuring drag‑and‑drop playback, desktop lyrics, mini mode, custom tray menus, audio visualization, auto‑update, Nedb persistence, and more. Repository: https://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 typical Electron project layouts, usage of Vue components, and integration of native features.

Conclusion

By following the steps above, developers can quickly set up a cross‑platform Electron environment, understand the underlying directory structure, and build functional desktop applications using familiar web technologies.