diff --git a/README.md b/README.md index d9198b2..52cb063 100644 --- a/README.md +++ b/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 +![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) + + ## 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. + diff --git a/README.zh-CN.md b/README.zh-CN.md index 14ca876..206ffad 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -15,15 +15,20 @@ - 扩展十分灵活 -## 运行 - -- 第一种方式是通过脚手架 +## 快速开始 ```sh 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) + + ## 目录 一旦启动或打包脚本执行过，会在根目录产生 **`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) +