# electron-vue-vite




**English | [็ฎไฝไธญๆ](README.zh-CN.md)**
๐ฅณ Very simple `Electron` + `Vue3` + `Vite2` boilerplate.
## Run Setup
```bash
# clone the project
git clone git@github.com:caoxiemeihao/electron-vue-vite.git
# enter the project directory
cd electron-vue-vite
# install dependency(Recommend use yarn)
yarn
# develop
yarn dev
```
## Directory
```tree
โ
โโโ 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
โ
```
#### `dist` and `src`
- Once `npm run dev` or `npm run build` is executed. Will be generated `dist`, it is the same as the `src` structure.
- This ensures the accuracy of path calculation.
```tree
โโโ dist
โ โโโ main
โ โโโ preload
โ โโโ renderer
โโโ src
โ โโโ main
โ โโโ preload
โ โโโ renderer
โ
```
## Communication
**All NodeJsใElectron API invoke passed `Preload-script`**
* **src/preload/index.ts**
```typescript
// --------- Expose some API to Renderer process. ---------
contextBridge.exposeInMainWorld('fs', fs)
contextBridge.exposeInMainWorld('ipcRenderer', ipcRenderer)
```
* **src/renderer/src/main.ts**
```typescript
console.log('fs', window.fs)
console.log('ipcRenderer', window.ipcRenderer)
```
## Mian window
## Wechat