2020-08-16 12:49:24 +08:00
|
|
|
|
# electron-vue-vite
|
2021-11-04 14:28:22 +08:00
|
|
|
|
|
2021-11-04 14:30:32 +08:00
|
|
|
|
![GitHub stars](https://img.shields.io/github/stars/caoxiemeihao/electron-vue-vite?color=fa6470&style=flat)
|
|
|
|
|
![GitHub forks](https://img.shields.io/github/forks/caoxiemeihao/electron-vue-vite?style=flat)
|
|
|
|
|
![GitHub issues](https://img.shields.io/github/issues/caoxiemeihao/electron-vue-vite?style=flat)
|
|
|
|
|
![GitHub license](https://img.shields.io/github/license/caoxiemeihao/electron-vue-vite?style=flat)
|
2021-11-04 14:28:22 +08:00
|
|
|
|
|
2021-11-09 19:38:57 +08:00
|
|
|
|
**English | [简体中文](README.zh-CN.md)**
|
|
|
|
|
|
2021-11-08 09:59:55 +08:00
|
|
|
|
🥳 Simple `Electron` + `Vue3` + `Vite2` boilerplate. Build based on rollup and ⚡️vite.
|
2020-08-16 20:42:52 +08:00
|
|
|
|
|
2021-11-02 15:06:09 +08:00
|
|
|
|
## 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
|
|
|
|
|
```
|
2020-08-16 21:00:37 +08:00
|
|
|
|
|
2021-11-11 18:29:18 +08:00
|
|
|
|
## 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 started or packaged, the script is executed. As like as two peas, the `dist` directory structure will be generated as `src`.
|
|
|
|
|
|
|
|
|
|
- This ensures the accuracy of path calculation.
|
|
|
|
|
|
|
|
|
|
```tree
|
|
|
|
|
├── dist
|
|
|
|
|
| ├── main
|
|
|
|
|
| ├── preload
|
|
|
|
|
| ├── renderer
|
|
|
|
|
├── src
|
|
|
|
|
| ├── main
|
|
|
|
|
| ├── preload
|
|
|
|
|
| ├── renderer
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
2021-09-09 10:01:48 +08:00
|
|
|
|
## Communication
|
2021-11-11 18:29:18 +08:00
|
|
|
|
|
|
|
|
|
**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)
|
|
|
|
|
```
|
2021-05-08 17:29:38 +08:00
|
|
|
|
|
2021-11-02 15:06:09 +08:00
|
|
|
|
## Mian window
|
2021-11-11 18:29:18 +08:00
|
|
|
|
<img width="400px" src="https://raw.githubusercontent.com/caoxiemeihao/blog/main/electron-vue-vite/screenshot/electron-15.png" />
|
2021-11-02 15:06:09 +08:00
|
|
|
|
|
2021-11-06 22:31:12 +08:00
|
|
|
|
## Wechat group
|
2021-06-20 19:10:27 +08:00
|
|
|
|
|
2021-11-06 22:31:12 +08:00
|
|
|
|
<img width="244px" src="https://raw.githubusercontent.com/caoxiemeihao/blog/main/assets/wechat/group/qrcode.jpg" />
|