1. 初始化項目
在命令行中運行以下命令
npm create @quick-start/electron@latest
也可以通過附加命令行選項直接指定項目名稱和你想要使用的模版。例如，要構建一個 Electron + Vue 項目，運行:
# npm 7+，需要添加額外的 --：
npm create @quick-start/electron@latest my-app -- --template vue
目前支持的模版預設如下
| JavaScript | TypeScript |
|---|---|
| vanilla | vanilla-ts |
| vue | vue-ts |
| react | react-ts |
| svelte | svelte-ts |
| solid | solid-ts |
2. 按提示選擇需要的配置
下面是我的選擇，可以根據自己的需求進行選擇
| Project name | 項目名稱，自定義輸入 |
|---|---|
| Select a framework | 選擇框架，vanilla, vue, react, svelte, solid可選擇，演示這里我們選擇vue |
| Add TypeScript | 是否添加TypeScript，演示這里我們選擇no |
| Add Electron updater plugin | 是否添加Electron更新插件，yes |
| Enable Electron download mirror proxy | 鏡像下載代理，國內網絡建議開啟，yes |
3. 進入項目目錄，安裝依賴
進入目錄
cd electron-app
安裝依賴
npm install
4. 啟動項目
npm run dev
出現下面應用窗口說明項目啟動成功
5. 目錄結構
├── .vscode //vscode配置文件（可以不管）
├── build // 編譯過程輸出文件目錄
├── dist // 打包后輸出目錄
├── node_modules // 依賴模塊
├── out //編譯過程輸出文件目錄
├── resources // 公共資源文件，主進程使用
│ └── icon.png //默認圖標
├──src
│ ├── main // 主進程開發目錄
│ │ └── index.js //主進程入口文件
│ ├── preload // 預加載腳本開發目錄
│ │ └── index.js // 預加載默認腳本
│ └── renderer // 渲染進程開發目錄，類似純web項目根目錄
│ ├── src
│ │ ├── assets //資源文件目錄
│ │ ├── components //組件目錄
│ │ ├── App.vue // 入口頁面
│ │ └── main.js // 入口文件
│ └── index.js.html // 默認html文件
├── .editorconfig
├── .eslintignore //eslint代碼檢查忽略配置文件
├── .eslintrc.cjs //eslint代碼檢查配置文件
├── .gitignore //git忽略配置文件
├── .npmrc // npm源配置文件
├── .prettierignore //prettier代碼格式化忽略配置文件
├── .prettierrc.yaml //prettier代碼格式化配置文件
├── dev-app-update.yml
├── electron-builder.yml //打包配置文件
├──electron.vite.config.mjs //electron-vite配置文件
├── package-lock.json
├── package.json
└──README.md //項目說明
6. electron-vite官方中文文檔
electron-vite | 下一代 Electron 開發構建工具
)
