chore(docs): UPDATE

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**
+* **src/renderer/src/main.ts**
-
-    ```typescript
-    interface Window {
-      fs: typeof import('fs')
-      ipcRenderer: import('electron').IpcRenderer
-    }
-    ```
-
-  * **src/render/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
 

README.zh-CN.md

@@ -25,63 +25,45 @@
   yarn dev
   ```
 
-## 工作原理
+## 目录结构
 
-#### `main`、`preload`、`render`
+```tree
-
+├
-* **这个三个 Electron 中的重要概念会贯穿整个模板的脚本与源码的设计**
+├── configs
-
+├   ├── vite-main.config.ts          主进程配置文件，编译 src/main
-* **它们分别对应 主进程(main-process)、预加载脚本(preload-script)、渲染进程(renderer-process)**
+├   ├── vite-preload.config.ts       预加载脚本配置文件，编译 src/preload
-
+├   ├── vite-renderer.config.ts      渲染进程配置文件，编译 src/renderer
-* **设计上，它们构建脚本独立、源码独立**
+├
-
+├── scripts
-#### 顶层只有 `scripts`、`src` 两个目录
+├   ├── build.mjs                    项目构建脚本，对应 npm run build
-
+├   ├── electron-builder.config.mjs
-* `scripts` 负责 主进程(main-process) 与 预加载脚本(preload-script) 的编译、热更新功能
+├   ├── watch.mjs                    项目开发脚本，对应 npm run dev
-
+├
-* `src` 项目目录源码 -- `见名知意`
+├── src
-
+├   ├── main                         主进程源码
-#### `package.json[scripts]` 中提供了三个对应的 开发(dev) 与 构建(build) 命令
+├   ├── preload                      预加载脚本源码
-
+├   ├── renderer                     渲染进程源码
-* `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`
-
-* ----
 
 #### 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**
+* **src/renderer/main.ts**
-
-    ```typescript
-    interface Window {
-      fs: typeof import('fs')
-      ipcRenderer: import('electron').IpcRenderer
-    }
-    ```
-
-  * **src/render/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" />