mirror of
https://github.com/electron-vite/electron-vite-vue
synced 2025-01-19 11:56:36 +08:00
chore(docs): UPDATE
This commit is contained in:
草鞋没号
parent
29687b3018
commit
798e7da0cf
77
README.md
77
README.md
@ -9,21 +9,6 @@
|
||||
|
||||
🥳 Simple `Electron` + `Vue3` + `Vite2` boilerplate. Build based on rollup and ⚡️vite.
|
||||
|
||||
## Feature
|
||||
- HRM
|
||||
|
||||
* `Main process` hot restart
|
||||
* `Preload script` hot reload
|
||||
* `Renderer process` hot module replacement -- power by Vite
|
||||
|
||||
- Beautiful log -- power by concurrently
|
||||
|
||||
* `[R]` means `Renderer process`
|
||||
* `[P]` means `Preload script`
|
||||
* `[M]` means `Main process`
|
||||
|
||||
<img width="700px" src="https://raw.githubusercontent.com/caoxiemeihao/blog/main/electron-vue-vite/screenshot/better-log.png" />
|
||||
|
||||
## Run Setup
|
||||
|
||||
```bash
|
||||
@ -40,8 +25,48 @@
|
||||
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 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
|
||||
|
|
||||
```
|
||||
|
||||
## Communication
|
||||
- All NodeJs、Electron API invoke passed `Preload script`
|
||||
|
||||
**All NodeJs、Electron API invoke passed `Preload-script`**
|
||||
|
||||
* **src/preload/index.ts**
|
||||
|
||||
@ -51,31 +76,15 @@
|
||||
contextBridge.exposeInMainWorld('ipcRenderer', ipcRenderer)
|
||||
```
|
||||
|
||||
* **typings/global.d.ts**
|
||||
|
||||
```typescript
|
||||
interface Window {
|
||||
fs: typeof import('fs')
|
||||
ipcRenderer: import('electron').IpcRenderer
|
||||
}
|
||||
```
|
||||
|
||||
* **src/render/main.ts**
|
||||
* **src/renderer/src/main.ts**
|
||||
|
||||
```typescript
|
||||
console.log('fs', window.fs)
|
||||
console.log('ipcRenderer', window.ipcRenderer)
|
||||
```
|
||||
## Branchs
|
||||
- [ant-design-vue](https://github.com/caoxiemeihao/electron-vue-vite/tree/ant-design-vue)
|
||||
* [x] Use tsx
|
||||
* [x] Integration ant-design-vue
|
||||
- [element-plus](https://github.com/caoxiemeihao/electron-vue-vite/tree/element-plus) `登录窗口、element-ui 这个可能很适合你` 🚀
|
||||
* [x] With multiple BrowserWindow
|
||||
* [x] Integration element-plus
|
||||
|
||||
## Mian window
|
||||
<img width="700px" src="https://raw.githubusercontent.com/caoxiemeihao/blog/main/electron-vue-vite/screenshot/electron-15.png" />
|
||||
<img width="400px" src="https://raw.githubusercontent.com/caoxiemeihao/blog/main/electron-vue-vite/screenshot/electron-15.png" />
|
||||
|
||||
## Wechat group
|
||||
|
||||
|
||||
@ -25,63 +25,45 @@
|
||||
yarn dev
|
||||
```
|
||||
|
||||
## 工作原理
|
||||
## 目录结构
|
||||
|
||||
#### `main`、`preload`、`render`
|
||||
|
||||
* **这个三个 Electron 中的重要概念会贯穿整个模板的脚本与源码的设计**
|
||||
|
||||
* **它们分别对应 主进程(main-process)、预加载脚本(preload-script)、渲染进程(renderer-process)**
|
||||
|
||||
* **设计上，它们构建脚本独立、源码独立**
|
||||
|
||||
#### 顶层只有 `scripts`、`src` 两个目录
|
||||
|
||||
* `scripts` 负责 主进程(main-process) 与 预加载脚本(preload-script) 的编译、热更新功能
|
||||
|
||||
* `src` 项目目录源码 -- `见名知意`
|
||||
|
||||
#### `package.json[scripts]` 中提供了三个对应的 开发(dev) 与 构建(build) 命令
|
||||
|
||||
* `dev:render` 对应 `vite serve` 提供开发期的 `renderer-process` 热更新 (vite 提供的 HMR 功能)
|
||||
|
||||
* `dev:preload` 对应 `scripts/build-preload.ts --watch` 提供开发期的 `preload-script` 重载 (通过 WebSocket 通知页面刷新即可重新加载 preload-script)
|
||||
|
||||
* `dev:main` 对应 `scripts/build-main.ts --watch` 提供开发期的 `main-process` 重启 (直接杀死当前 Electron 应用，然后重新拉起)
|
||||
|
||||
* `dev` 由 `concurrently` 组合的上面三个命令，并且提供 `[R]`、`[P]`、`[M]` 三个前缀提高 log 的辨识度
|
||||
|
||||
* <img width="700px" src="https://raw.githubusercontent.com/caoxiemeihao/blog/main/electron-vue-vite/screenshot/better-log.png" />
|
||||
|
||||
* ----
|
||||
|
||||
* `build:render` 对应 `vite build` 构建 `renderer-process` 代码 (vite)
|
||||
|
||||
* `build:preload` 对应 `vite build` 构建 `scripts/build-preload.ts` 代码 (rollup)
|
||||
|
||||
* `build:main` 对应 `vite build` 构建 `scripts/build-main.ts` 代码 (rollup)
|
||||
|
||||
* `build` 串联了上述三个命令，之后运行了 `electron-builder`
|
||||
|
||||
* ----
|
||||
```tree
|
||||
├
|
||||
├── configs
|
||||
├ ├── vite-main.config.ts 主进程配置文件，编译 src/main
|
||||
├ ├── vite-preload.config.ts 预加载脚本配置文件，编译 src/preload
|
||||
├ ├── vite-renderer.config.ts 渲染进程配置文件，编译 src/renderer
|
||||
├
|
||||
├── scripts
|
||||
├ ├── build.mjs 项目构建脚本，对应 npm run build
|
||||
├ ├── electron-builder.config.mjs
|
||||
├ ├── watch.mjs 项目开发脚本，对应 npm run dev
|
||||
├
|
||||
├── src
|
||||
├ ├── main 主进程源码
|
||||
├ ├── preload 预加载脚本源码
|
||||
├ ├── renderer 渲染进程源码
|
||||
├
|
||||
```
|
||||
|
||||
#### dist 与 src
|
||||
|
||||
- 一旦启动或打包脚本执行过，会在根目录产生 **`dist` 文件夹，里面的文件夹同 `src` 一模一样**
|
||||
|
||||
- 在使用一些路径计算时，尤其是相对路径计算；`dist` 与 `src` 里面保持相同的目录结构能避开好多问题
|
||||
|
||||
```tree
|
||||
├── dist
|
||||
| ├── main
|
||||
| ├── preload
|
||||
| ├── render
|
||||
| ├── renderer
|
||||
├── src
|
||||
| ├── main
|
||||
| ├── preload
|
||||
| ├── render
|
||||
| ├── renderer
|
||||
|
|
||||
```
|
||||
|
||||
- 在使用一些路径计算时，尤其是相对路径计算；`dist` 与 `src` 里面保持相同的目录结构能避开好多问题
|
||||
|
||||
## 渲染进程使用 NodeJs API
|
||||
|
||||
@ -99,38 +81,12 @@
|
||||
contextBridge.exposeInMainWorld('ipcRenderer', ipcRenderer)
|
||||
```
|
||||
|
||||
* **typings/global.d.ts**
|
||||
|
||||
```typescript
|
||||
interface Window {
|
||||
fs: typeof import('fs')
|
||||
ipcRenderer: import('electron').IpcRenderer
|
||||
}
|
||||
```
|
||||
|
||||
* **src/render/main.ts**
|
||||
* **src/renderer/main.ts**
|
||||
|
||||
```typescript
|
||||
console.log('fs', window.fs)
|
||||
console.log('ipcRenderer', window.ipcRenderer)
|
||||
```
|
||||
## 关于技术选型
|
||||
|
||||
- 最早开始这个项目时 `Vite` 还在 1.0 阶段，基本是给个验性的工具；
|
||||
|
||||
所以 主进程(main-process)、预加载脚本(preload-script) 需要额外用 `Rollup` 打包；
|
||||
|
||||
选择 `Rollup` 构建主要是两点原因
|
||||
|
||||
* 一来构建出来的代码很清晰尤其是对比 `Webpack`
|
||||
|
||||
* 二来是本身 `Vite` 也是基于 `Rollup` 的，所以能通用很多包，少装点依赖，统一技术栈
|
||||
|
||||
- 如果你嫌这个项目(Rollup)运行慢；你可以尝试下我的另一模板，所有代码均使用 `Vite` 构建；
|
||||
|
||||
速度上确实要比这个快很多，顺便还集成了 `React` 🎉
|
||||
|
||||
* 👉 [⚡️ Super-fast vite + electron boilerplate. Support React/Vue template.](https://github.com/caoxiemeihao/vite-electron-boilerplate)
|
||||
|
||||
## 运行效果
|
||||
<img width="700px" src="https://raw.githubusercontent.com/caoxiemeihao/blog/main/electron-vue-vite/screenshot/electron-15.png" />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user