Electron Development Guide: Environment Setup, Project Creation, and Source Code Structure

Electron is a cross‑platform development framework built on Chromium and Node.js that enables developers to create desktop applications for macOS, Windows, and Linux using HTML, CSS, and JavaScript; popular apps such as VS Code and Atom are built with it.

Environment setup : Install Node.js (download from the official site or use Homebrew) and optionally switch 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

Verify the Vue‑CLI version and upgrade if necessary:

vue -V

npm install @vue/cli -g

Install Electron globally (or via cnpm) and confirm the installation:

npm install -g electron

cnpm install -g electron

electron --version

Creating and running a project : Clone the official quick‑start repository, install dependencies, and start the app:

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

cd electron-quick-start

npm install

npm start

Alternatively, use the vue‑cli electron‑vue template:

vue init simulatedgreg/electron-vue

After selecting the prompts, install the project dependencies and run the template:

npm install

npm run dev

or npm run build

Electron source tree : The top‑level directories include atom (the main source), chromium_src , docs , spec , and build configuration files. Developers mainly work in src , package.json , and appveyor.yml , with additional important folders such as script , tools , vendor , node_modules , out , dist , and external_binaries .

Application project structure : An Electron‑Vue project contains directories like electron-vue (template config), build (build scripts), config (basic settings), node_modules (dependencies), src (source code), static (static assets), index.html (single HTML entry), and package.json (dependency list).

Within src , the main folder holds index.js (application entry) and index.dev.js (development‑only setup). The renderer folder contains assets , components , router , store/modules , and the Vue entry main.js .

Process model : Electron applications consist of a single main process (running the main script) that creates BrowserWindow instances, each of which runs its own renderer process. The main process manages windows and IPC, while each renderer process runs a web page with full Node.js API access.

Related examples : Sample projects such as electron‑vue‑cloud‑music and electron‑vue‑music demonstrate real‑world usage.