From 49370f7e47dca01d8a4120e9df57197d40b11fdb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8D=89=E9=9E=8B=E6=B2=A1=E5=8F=B7?= <308487730@qq.com>
Date: Tue, 9 Nov 2021 19:38:57 +0800
Subject: [PATCH] =?UTF-8?q?chore(docs):=20=E7=AE=80=E4=BD=93=E4=B8=AD?=
=?UTF-8?q?=E6=96=87=20README?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
README.md | 2 +
README.zh-CN.md | 117 ++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 119 insertions(+)
create mode 100644 README.zh-CN.md
diff --git a/README.md b/README.md
index 1838b51..9ca8bd5 100644
--- a/README.md
+++ b/README.md
@@ -5,6 +5,8 @@
+**English | [简体中文](README.zh-CN.md)**
+
🥳 Simple `Electron` + `Vue3` + `Vite2` boilerplate. Build based on rollup and ⚡️vite.
## Feature
diff --git a/README.zh-CN.md b/README.zh-CN.md
new file mode 100644
index 0000000..399dc7d
--- /dev/null
+++ b/README.zh-CN.md
@@ -0,0 +1,117 @@
+# electron-vue-vite
+
+
+
+
+
+
+**简体中文 | [English](README.zh-CN.md)**
+
+🥳 基于 `Rollup`、`⚡️Vite` 构建的 `Electron` + `Vue3` + `Vite2` 模板；**简单，容易上手！**
+
+## 工作原理
+
+#### `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 的辨识度
+
+* 
+
+* ----
+
+* `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`
+
+* ----
+
+
+## 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
+ ```
+
+## 渲染进程使用 NodeJs API
+
+- 默认情况下，因为安全的原因 Electron 默认不支持在 渲染进程 中使用 NodeJs API (如果你执意要在 渲染进程 中使用 NodeJs API 那请自便)
+
+- 推荐所有的 NodeJs、Electron API 通过 `preload-script` 注入到 渲染进程中；例如：
+
+ * **src/preload/index.ts**
+
+ ```typescript
+ // --------- Expose some API to Renderer process. ---------
+ contextBridge.exposeInMainWorld('fs', fs)
+ contextBridge.exposeInMainWorld('ipcRenderer', ipcRenderer)
+ ```
+
+ * **typings/global.d.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` 构建主要是两点原因
+
+ * 一来构建出来的代码很清晰尤其是对比 `Webapck`
+
+ * 二来是本身 `Vite` 也是基于 `Rollup` 的，所以能通用很多包，少装点依赖，统一技术栈
+
+- 如果你嫌这个项目(Rollup)运行慢；你可以尝试下我的另一模板，所有代码均使用 `Vite` 构建；
+
+ 速度上确实要比这个快很多，顺便还集成了 `React` 🎉
+
+ * 👉 [⚡️ Super-fast electron + vite boilerplate. Support React/Vue template.](https://github.com/caoxiemeihao/electron-vite-template)
+
+## 运行效果
+
+
+## Wechat group
+
+
\ No newline at end of file