English | 简体中文
🥳 Very simple Electron + Vue3 + Vite2 boilerplate.
# clone the project
git clone [email protected]:caoxiemeihao/electron-vue-vite.git
# enter the project directory
cd electron-vue-vite
# install dependency(Recommend use yarn)
yarn
# develop
yarn 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 devornpm run buildis executed. Will be generateddist, it is the same as thesrcstructure. -
This ensures the accuracy of path calculation.
├── dist
├ ├── main
├ ├── preload
├ ├── renderer
├── src
├ ├── main
├ ├── preload
├ ├── renderer
├
All NodeJs、Electron API invoke passed Preload-script
-
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)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent