lixuechuan
/
electron-vite-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: update

This commit is contained in:
草鞋没号 2022-04-25 08:51:42 +08:00
parent 01fdccf054
commit 33e2adb3fc
2 changed files with 68 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
README.md
View File

@ -9,22 +9,25 @@
## Overview ## Overview
- Very simple Vite, React, Electron integration template. - Real simple Vite, React, Electron integration template.
- Contains only the basic dependencies. - Contains only the basic dependencies.
- The extension is very flexible. - The extension is real flexible.
## Usage ## Quick start
- The first way is to use scaffolding
```sh ```sh
npm create electron-vite npm create electron-vite
``` ```
- The second way is to clone the repository manually ![electron-vite-react.gif](https://github.com/electron-vite/electron-vite-react/blob/main/packages/renderer/public/electron-vite-react.gif?raw=true)
## Debug
![electron-vite-react-debug.gif](https://github.com/electron-vite/electron-vite-react/blob/main/packages/renderer/public/electron-vite-react-debug.gif?raw=true)
<!--
```sh ```sh
# clone the project # clone the project
git clone https://github.com/caoxiemeihao/vite-react-electron.git git clone https://github.com/caoxiemeihao/vite-react-electron.git
@ -41,41 +44,40 @@ npm run dev
# make a production build # make a production build
npm run build npm run build
``` ```
-->
## Directory structure ## Directory structure
Once `dev` or `build` npm-script is executed, the `dist` folder will be generated. It has the same structure as the `packages` folder, the purpose of this design is to ensure the correct path calculation. Once `dev` or `build` npm-script is executed, the `dist` folder will be generated. It has the same structure as the `packages` folder, the purpose of this design is to ensure the correct path calculation.
```tree ```tree
├
├── build Resources for the production build ├── build Resources for the production build
├ ├── icon.icns Icon for the application on macOS | ├── icon.icns Icon for the application on macOS
├ ├── icon.ico Icon for the application | ├── icon.ico Icon for the application
├ ├── installerIcon.ico Icon for the application installer | ├── installerIcon.ico Icon for the application installer
├ ├── uninstallerIcon.ico Icon for the application uninstaller | └── uninstallerIcon.ico Icon for the application uninstaller
├ |
├── dist Generated after build according to the "packages" directory ├── dist Generated after build according to the "packages" directory
├ ├── main | ├── main
├ ├── preload | ├── preload
├ ├── renderer | └── renderer
├ |
├── release Generated after production build, contains executables ├── release Generated after production build, contains executables
├ ├── {version} | └──{version}
├ ├── win-unpacked Contains unpacked application executable | ├── win-unpacked Contains unpacked application executable
├ ├── Setup.exe Installer for the application | └── Setup.exe Installer for the application
├ |
├── scripts ├── scripts
├ ├── build.mjs Develop script -> npm run build | ├── build.mjs Develop script -> npm run build
├ ├── watch.mjs Develop script -> npm run dev | └── watch.mjs Develop script -> npm run dev
├ |
├── packages ├── packages
├ ├── main Main-process source code | ├── main Main-process source code
├ ├── vite.config.ts | | └── vite.config.ts
├ ├── preload Preload-script source code | ├── preload Preload-script source code
├ ├── vite.config.ts | | └── vite.config.ts
├ ├── renderer Renderer-process source code | └── renderer Renderer-process source code
├ ├── vite.config.ts | └── vite.config.ts
├
``` ```
## Use Electron and NodeJS API ## Use Electron and NodeJS API
@ -147,6 +149,8 @@ export default {
- Dependencies like [Vue](https://www.npmjs.com/package/vue) and [React](https://www.npmjs.com/package/react), which are pure javascript modules that can be built with Vite, can be placed in `devDependencies`. This reduces the size of the application. - Dependencies like [Vue](https://www.npmjs.com/package/vue) and [React](https://www.npmjs.com/package/react), which are pure javascript modules that can be built with Vite, can be placed in `devDependencies`. This reduces the size of the application.
<!--
## Result ## Result
<img width="400px" src="https://raw.githubusercontent.com/caoxiemeihao/blog/main/vite-react-electron/react-win.png" /> <img width="400px" src="https://raw.githubusercontent.com/caoxiemeihao/blog/main/vite-react-electron/react-win.png" />
-->

62
README.zh-CN.md
View File

@ -15,15 +15,20 @@
- 扩展十分灵活 - 扩展十分灵活
## 运行 ## 快速开始
- 第一种方式是通过脚手架
```sh ```sh
npm create electron-vite npm create electron-vite
``` ```
- 第二种方式是通过 clone 该仓库 ![electron-vite-react.gif](https://github.com/electron-vite/electron-vite-react/blob/main/packages/renderer/public/electron-vite-react.gif?raw=true)
## 调试
![electron-vite-react-debug.gif](https://github.com/electron-vite/electron-vite-react/blob/main/packages/renderer/public/electron-vite-react-debug.gif?raw=true)
<!--
clone 该仓库
```sh ```sh
# clone the project # clone the project
@ -38,41 +43,40 @@ npm install
# develop # develop
npm run dev npm run dev
``` ```
-->
## 目录 ## 目录
一旦启动或打包脚本执行过，会在根目录产生 **`dist` 文件夹，里面的文件夹同 `packages` 一模一样**；在使用一些路径计算时，尤其是相对路径计算；`dist` 与 `packages` 里面保持相同的目录结构能避开好多问题 一旦启动或打包脚本执行过，会在根目录产生 **`dist` 文件夹，里面的文件夹同 `packages` 一模一样**；在使用一些路径计算时，尤其是相对路径计算；`dist` 与 `packages` 里面保持相同的目录结构能避开好多问题
```tree ```tree
├
├── build 用于生产构建的资源 ├── build 用于生产构建的资源
├ ├── icon.icns 应用图标(macOS) | ├── icon.icns 应用图标(macOS)
├ ├── icon.ico 应用图标 | ├── icon.ico 应用图标
├ ├── installerIcon.ico 安装图标 | ├── installerIcon.ico 安装图标
├ ├── uninstallerIcon.ico 卸载图标 | └── uninstallerIcon.ico 卸载图标
├ |
├── dist 构建后，根据 packages 目录生成 ├── dist 构建后，根据 packages 目录生成
├ ├── main | ├── main
├ ├── preload | ├── preload
├ ├── renderer | └── renderer
├ |
├── release 在生产构建后生成，包含可执行文件 ├── release 在生产构建后生成，包含可执行文件
├ ├── {version} | └── {version}
├ ├── win-unpacked 包含未打包的应用程序可执行文件 | ├── win-unpacked 包含未打包的应用程序可执行文件
├ ├── Setup.exe 应用程序的安装程序 | └── Setup.exe 应用程序的安装程序
├ |
├── scripts ├── scripts
├ ├── build.mjs 项目开发脚本 npm run build | ├── build.mjs 项目开发脚本 npm run build
├ ├── watch.mjs 项目开发脚本 npm run dev | └── watch.mjs 项目开发脚本 npm run dev
├ |
├── packages ├── packages
├ ├── main 主进程源码 | ├── main 主进程源码
├ ├── vite.config.ts | | └── vite.config.ts
├ ├── preload 预加载脚本源码 | ├── preload 预加载脚本源码
├ ├── vite.config.ts | | └── vite.config.ts
├ ├── renderer 渲染进程源码 | └── renderer 渲染进程源码
├ ├── vite.config.ts | └── vite.config.ts
├
``` ```
## 依赖放到 dependencies 还是 devDependencies ## 依赖放到 dependencies 还是 devDependencies
@ -135,6 +139,8 @@ electron-builder 打包时候会将 dependencies 中的包打包到 app.asar 里
2. `configs/vite-renderer.config` 中有个 `resolveElectron` **最好了解下** 2. `configs/vite-renderer.config` 中有个 `resolveElectron` **最好了解下**
👉 这里有个 `issues` [请教一下vite-renderer.config中的resolveElectron函数](https://github.com/caoxiemeihao/electron-vue-vite/issues/52) 👉 这里有个 `issues` [请教一下vite-renderer.config中的resolveElectron函数](https://github.com/caoxiemeihao/electron-vue-vite/issues/52)
<!--
## 效果 ## 效果
<img width="400px" src="https://raw.githubusercontent.com/caoxiemeihao/blog/main/vite-react-electron/react-win.png" /> <img width="400px" src="https://raw.githubusercontent.com/caoxiemeihao/blog/main/vite-react-electron/react-win.png" />
-->