English | ็ฎไฝไธญๆ
๐ฅณ Very simple Electron
+ Vue3
+ Vite2
boilerplate.
# clone the project
git clone git@github.com:caoxiemeihao/electron-vue-vite.git
# enter the project directory
cd electron-vue-vite
# install dependency
npm install
# develop
npm run dev
โ
โโโ configs
โ โโโ vite-main.config.ts Main-process config file, for -> src/main
โ โโโ vite-preload.config.ts Preload-script config file, for -> src/preload
โ โโโ vite-renderer.config.ts Renderer-script config file, for -> src/renderer
โ
โโโ scripts
โ โโโ build.mjs Build script, for -> npm run build
โ โโโ electron-builder.config.mjs
โ โโโ watch.mjs Develop script, for -> npm run dev
โ
โโโ src
โ โโโ main Main-process source code
โ โโโ preload Preload-script source code
โ โโโ renderer Renderer-process source code
โ
-
Once
npm run dev
ornpm run build
is executed. Will be generateddist
, it is the same as thesrc
structure. -
This ensures the accuracy of path calculation.
โโโ dist
โ โโโ main
โ โโโ preload
โ โโโ renderer
โโโ src
โ โโโ main
โ โโโ preload
โ โโโ renderer
โ
๐จ By default, Electron don't support the use of API related to Electron and NoeJs in the Renderer-process, but someone still need to use it. If so, you can see the ๐ npm-package vitejs-plugin-electron or another template vite-webpack-electron
-
src/preload/index.ts
// --------- Expose some API to Renderer process. --------- contextBridge.exposeInMainWorld('fs', fs) contextBridge.exposeInMainWorld('ipcRenderer', ipcRenderer)
-
src/renderer/src/main.ts
console.log('fs', window.fs) console.log('ipcRenderer', window.ipcRenderer)