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)