环境搭建 #

1. 访问 https://nodejs.org/
2. 下载 LTS 版本安装包
3. 运行安装程序，按提示完成安装

# 下载 nvm-windows
# https://github.com/coreybutler/nvm-windows/releases

# 安装 Node.js
nvm install 20
nvm use 20

# 验证安装
node -v
npm -v

1. 访问 https://nodejs.org/
2. 下载 macOS 安装包
3. 运行安装程序

# 安装 Homebrew（如未安装）
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# 安装 Node.js
brew install node

# 验证安装
node -v
npm -v

# 安装 nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# 重新加载终端配置
source ~/.zshrc

# 安装 Node.js
nvm install 20
nvm use 20

# 验证安装
node -v
npm -v

# 使用 NodeSource 仓库
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs

# 验证安装
node -v
npm -v

# 使用 NodeSource 仓库
curl -fsSL https://rpm.nodesource.com/setup_20.x | sudo bash -
sudo yum install -y nodejs

# 验证安装
node -v
npm -v

# 设置淘宝镜像
npm config set registry https://registry.npmmirror.com

# 验证配置
npm config get registry

# 安装 nrm
npm install -g nrm

# 查看可用镜像源
nrm ls

# 切换镜像源
nrm use taobao

# 测试镜像速度
nrm test

# 设置 Electron 下载镜像
npm config set electron_mirror https://npmmirror.com/mirrors/electron/

# 或在项目 .npmrc 文件中添加
echo "electron_mirror=https://npmmirror.com/mirrors/electron/" >> .npmrc

# 创建项目目录
mkdir my-electron-app
cd my-electron-app

# 初始化 npm 项目
npm init -y

# 安装 Electron 为开发依赖
npm install electron --save-dev

{
    "name": "my-electron-app",
    "version": "1.0.0",
    "main": "main.js",
    "scripts": {
        "start": "electron .",
        "dev": "electron . --enable-logging"
    },
    "devDependencies": {
        "electron": "^28.0.0"
    }
}

# 全局安装 Electron Forge
npm install -g @electron-forge/cli

# 创建新项目
npx create-electron-app my-app

# 进入项目目录
cd my-app

# 启动开发服务器
npm start

# 克隆模板
git clone --depth 1 --single-branch https://github.com/electron-react-boilerplate/electron-react-boilerplate.git my-app

# 进入项目目录
cd my-app

# 安装依赖
npm install

# 启动开发服务器
npm start

# 创建 Vite 项目
npm create vite@latest my-electron-app -- --template react

# 进入项目目录
cd my-electron-app

# 安装 Electron
npm install electron --save-dev

# 安装 Vite Electron 插件
npm install vite-plugin-electron --save-dev

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Electron: Main Process",
            "type": "node",
            "request": "launch",
            "cwd": "${workspaceFolder}",
            "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
            "args": ["."],
            "outputCapture": "std"
        },
        {
            "name": "Electron: Renderer Process",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "webRoot": "${workspaceFolder}"
        }
    ]
}

npm install eslint --save-dev
npx eslint --init

module.exports = {
    env: {
        browser: true,
        es2021: true,
        node: true
    },
    extends: 'eslint:recommended',
    parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module'
    },
    rules: {
        'no-unused-vars': 'warn',
        'no-console': 'off'
    }
};

npm install prettier --save-dev

{
    "semi": true,
    "singleQuote": true,
    "tabWidth": 4,
    "trailingComma": "es5",
    "printWidth": 100
}

my-electron-app/
├── src/
│   ├── main/           # 主进程代码
│   │   └── index.js
│   ├── renderer/       # 渲染进程代码
│   │   ├── index.html
│   │   ├── index.js
│   │   └── styles.css
│   └── preload/        # 预加载脚本
│       └── index.js
├── assets/             # 静态资源
│   ├── icons/
│   └── images/
├── build/              # 构建配置
├── dist/               # 打包输出
├── .npmrc              # npm 配置
├── package.json
└── README.md

my-electron-app/
├── electron/
│   ├── main.js         # 主进程入口
│   ├── preload.js      # 预加载脚本
│   └── utils/          # 主进程工具函数
├── src/                # 渲染进程源码
│   ├── components/     # 组件目录
│   ├── pages/          # 页面目录
│   ├── styles/         # 样式目录
│   ├── utils/          # 工具函数
│   └── index.html      # 入口页面
├── resources/          # 资源文件
│   ├── icons/          # 图标
│   └── images/         # 图片
├── scripts/            # 脚本文件
├── tests/              # 测试文件
├── .eslintrc.js
├── .prettierrc
├── package.json
└── electron-builder.yml

# 启动 Electron
npm start

# 带日志输出启动
npm run dev

// 在主进程中打开开发者工具
mainWindow.webContents.openDevTools();

// 快捷键
// Windows/Linux: Ctrl + Shift + I
// macOS: Cmd + Option + I

npm install electron-reload --save-dev

// main.js
const electron = require('electron');

// 开发模式下启用热重载
if (process.env.NODE_ENV === 'development') {
    require('electron-reload')(__dirname, {
        electron: require(`${__dirname}/node_modules/electron`)
    });
}

npm install nodemon --save-dev

// package.json
{
    "scripts": {
        "dev": "nodemon --exec electron ."
    }
}

# 设置镜像源
npm config set electron_mirror https://npmmirror.com/mirrors/electron/

# 或使用环境变量
export ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/

# 使用 nvm 切换 Node 版本
nvm install 20
nvm use 20

# 查看当前版本
node -v

# macOS/Linux 修复 npm 权限
sudo chown -R $(whoami) ~/.npm
sudo chown -R $(whoami) /usr/local/lib/node_modules