docs: update
This commit is contained in:
草鞋没号
parent
01fdccf054
commit
33e2adb3fc
64
README.md
64
README.md
|
|
@ -9,22 +9,25 @@
|
|||
|
||||
## Overview
|
||||
|
||||
- Very simple Vite, React, Electron integration template.
|
||||
- Real simple Vite, React, Electron integration template.
|
||||
|
||||
- Contains only the basic dependencies.
|
||||
|
||||
- The extension is very flexible.
|
||||
- The extension is real flexible.
|
||||
|
||||
## Usage
|
||||
|
||||
- The first way is to use scaffolding
|
||||
## Quick start
|
||||
|
||||
```sh
|
||||
npm create electron-vite
|
||||
```
|
||||
|
||||
- The second way is to clone the repository manually
|
||||
|
||||
|
||||
## Debug
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
```sh
|
||||
# clone the project
|
||||
git clone https://github.com/caoxiemeihao/vite-react-electron.git
|
||||
|
|
@ -41,41 +44,40 @@ npm run dev
|
|||
# make a production build
|
||||
npm run build
|
||||
```
|
||||
-->
|
||||
|
||||
## 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.
|
||||
|
||||
```tree
|
||||
├
|
||||
├── build Resources for the production build
|
||||
├ ├── icon.icns Icon for the application on macOS
|
||||
├ ├── icon.ico Icon for the application
|
||||
├ ├── installerIcon.ico Icon for the application installer
|
||||
├ ├── uninstallerIcon.ico Icon for the application uninstaller
|
||||
├
|
||||
| ├── icon.icns Icon for the application on macOS
|
||||
| ├── icon.ico Icon for the application
|
||||
| ├── installerIcon.ico Icon for the application installer
|
||||
| └── uninstallerIcon.ico Icon for the application uninstaller
|
||||
|
|
||||
├── dist Generated after build according to the "packages" directory
|
||||
├ ├── main
|
||||
├ ├── preload
|
||||
├ ├── renderer
|
||||
├
|
||||
| ├── main
|
||||
| ├── preload
|
||||
| └── renderer
|
||||
|
|
||||
├── release Generated after production build, contains executables
|
||||
├ ├── {version}
|
||||
├ ├── win-unpacked Contains unpacked application executable
|
||||
├ ├── Setup.exe Installer for the application
|
||||
├
|
||||
| └──{version}
|
||||
| ├── win-unpacked Contains unpacked application executable
|
||||
| └── Setup.exe Installer for the application
|
||||
|
|
||||
├── scripts
|
||||
├ ├── build.mjs Develop script -> npm run build
|
||||
├ ├── watch.mjs Develop script -> npm run dev
|
||||
├
|
||||
| ├── build.mjs Develop script -> npm run build
|
||||
| └── watch.mjs Develop script -> npm run dev
|
||||
|
|
||||
├── packages
|
||||
├ ├── main Main-process source code
|
||||
├ ├── vite.config.ts
|
||||
├ ├── preload Preload-script source code
|
||||
├ ├── vite.config.ts
|
||||
├ ├── renderer Renderer-process source code
|
||||
├ ├── vite.config.ts
|
||||
├
|
||||
| ├── main Main-process source code
|
||||
| | └── vite.config.ts
|
||||
| ├── preload Preload-script source code
|
||||
| | └── vite.config.ts
|
||||
| └── renderer Renderer-process source code
|
||||
| └── vite.config.ts
|
||||
```
|
||||
|
||||
## 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.
|
||||
|
||||
<!--
|
||||
## Result
|
||||
|
||||
<img width="400px" src="https://raw.githubusercontent.com/caoxiemeihao/blog/main/vite-react-electron/react-win.png" />
|
||||
-->
|
||||
|
|
|
|||
|
|
@ -15,15 +15,20 @@
|
|||
|
||||
- 扩展十分灵活
|
||||
|
||||
## 运行
|
||||
|
||||
- 第一种方式是通过脚手架
|
||||
## 快速开始
|
||||
|
||||
```sh
|
||||
npm create electron-vite
|
||||
```
|
||||
|
||||
- 第二种方式是通过 clone 该仓库
|
||||
|
||||
|
||||
## 调试
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
clone 该仓库
|
||||
|
||||
```sh
|
||||
# clone the project
|
||||
|
|
@ -38,41 +43,40 @@ npm install
|
|||
# develop
|
||||
npm run dev
|
||||
```
|
||||
-->
|
||||
|
||||
## 目录
|
||||
|
||||
一旦启动或打包脚本执行过，会在根目录产生 **`dist` 文件夹，里面的文件夹同 `packages` 一模一样**；在使用一些路径计算时，尤其是相对路径计算；`dist` 与 `packages` 里面保持相同的目录结构能避开好多问题
|
||||
|
||||
```tree
|
||||
├
|
||||
├── build 用于生产构建的资源
|
||||
├ ├── icon.icns 应用图标(macOS)
|
||||
├ ├── icon.ico 应用图标
|
||||
├ ├── installerIcon.ico 安装图标
|
||||
├ ├── uninstallerIcon.ico 卸载图标
|
||||
├
|
||||
| ├── icon.icns 应用图标(macOS)
|
||||
| ├── icon.ico 应用图标
|
||||
| ├── installerIcon.ico 安装图标
|
||||
| └── uninstallerIcon.ico 卸载图标
|
||||
|
|
||||
├── dist 构建后，根据 packages 目录生成
|
||||
├ ├── main
|
||||
├ ├── preload
|
||||
├ ├── renderer
|
||||
├
|
||||
| ├── main
|
||||
| ├── preload
|
||||
| └── renderer
|
||||
|
|
||||
├── release 在生产构建后生成，包含可执行文件
|
||||
├ ├── {version}
|
||||
├ ├── win-unpacked 包含未打包的应用程序可执行文件
|
||||
├ ├── Setup.exe 应用程序的安装程序
|
||||
├
|
||||
| └── {version}
|
||||
| ├── win-unpacked 包含未打包的应用程序可执行文件
|
||||
| └── Setup.exe 应用程序的安装程序
|
||||
|
|
||||
├── scripts
|
||||
├ ├── build.mjs 项目开发脚本 npm run build
|
||||
├ ├── watch.mjs 项目开发脚本 npm run dev
|
||||
├
|
||||
| ├── build.mjs 项目开发脚本 npm run build
|
||||
| └── watch.mjs 项目开发脚本 npm run dev
|
||||
|
|
||||
├── packages
|
||||
├ ├── main 主进程源码
|
||||
├ ├── vite.config.ts
|
||||
├ ├── preload 预加载脚本源码
|
||||
├ ├── vite.config.ts
|
||||
├ ├── renderer 渲染进程源码
|
||||
├ ├── vite.config.ts
|
||||
├
|
||||
| ├── main 主进程源码
|
||||
| | └── vite.config.ts
|
||||
| ├── preload 预加载脚本源码
|
||||
| | └── vite.config.ts
|
||||
| └── renderer 渲染进程源码
|
||||
| └── vite.config.ts
|
||||
```
|
||||
|
||||
## 依赖放到 dependencies 还是 devDependencies
|
||||
|
|
@ -135,6 +139,8 @@ electron-builder 打包时候会将 dependencies 中的包打包到 app.asar 里
|
|||
2. `configs/vite-renderer.config` 中有个 `resolveElectron` **最好了解下**
|
||||
👉 这里有个 `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" />
|
||||
-->
|
||||
|
|
|
|||
Loading…
Reference in New Issue