diff --git a/README.md b/README.md index 09538eb..363a05b 100644 --- a/README.md +++ b/README.md @@ -11,41 +11,49 @@ 🥳 Real simple `Electron` + `Vue` + `Vite` boilerplate. -## Quick Start - -[![quick-start](https://asciinema.org/a/483731.svg)](https://asciinema.org/a/483731) - ## Overview -This is a `Vite`-integrated `Electron` template built with simplification in mind. +📦 Out of the box +💪 Support C/C++ addons +🔩 Support Use Electron、Node.js API in Renderer-process +🌱 Simple directory structure，real flexible +🖥 It's easy to implement multiple windows -The repo contains only the most basic files, dependencies and functionalities to ensure flexibility for various scenarios. +## Quick Start -You need a basic understanding of `Electron` and `Vite` to get started. But that's not mandatory - you can learn almost all the details by reading through the source code. Trust me, this repo is not that complex. 😋 +```sh +npm create electron-vite +``` + + + +![electron-vite-vue.gif](https://github.com/electron-vite/electron-vite-vue/blob/main/packages/renderer/public/electron-vite-vue.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 A `dist` folder will be generated everytime when `dev` or `build` command is executed. File structure of `dist` is identical to the `packages` directory to avoid any potential path calculation errors. ```tree -├ ├── dist Will be generated following the structure of "packages" directory -├ ├── main -├ ├── preload -├ ├── renderer -├ +| ├── main +| ├── preload +| └── renderer +| ├── scripts -├ ├── build.mjs Build script -> npm run build -├ ├── watch.mjs Develop script -> npm run dev -├ +| ├── build.mjs Build 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 ``` ## List the modules you may use as far as possible @@ -60,19 +68,7 @@ Used in Renderer-process 👉 [electron-vite-boilerplate/tree/nodeIntegration](h - [node-fetch](https://www.npmjs.com/package/node-fetch) - [file-type](https://www.npmjs.com/package/file-type) -**Native Addons** +**Native Addons(C/C++)** - [sqlite3](https://www.npmjs.com/package/sqlite3) - [serialport](https://www.npmjs.com/package/serialport) - -## Main window - - -## 请我喝杯下午茶 🥳 - -
- - -
- diff --git a/README.zh-CN.md b/README.zh-CN.md index 22db952..90ce4aa 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -10,43 +10,47 @@ 🥳 Electron + Vite + Vue 整合模板 -- **结构简单，容易上手！** -## 快速开始 - -[![quick-start](https://asciinema.org/a/483731.svg)](https://asciinema.org/a/483731) - ## 概述 -  这是一个追求精简的`Electron`类整合模板，只保持最基本的文件、最基本的依赖、最基本的功能；而不是大而全的、臃肿的设计。这样做的目的是能确保模板足够灵活。 +📦 开箱即用 +💪 支持 C/C++ 模块 +🔩 支持在渲染进程中使用 Electron、Node.js API +🌱 结构清晰，可塑性强 +🖥 很容易实现多窗口 -所以说如果你是对 -- 工程模板追求精简的 Coder，或者刚入世的小白想弄明白`Electron`整合类模板最基础的工作原理，亦或者你是大神只是想偷懒少干点活；那么这个模板最合适你不过了。 +## 快速开始 -尽管如此，我还是希望你对`Electron` `Vite`有一定的基础；因为除了项目结构简单外，这份`README`也显得 “精简” 。 +```sh +npm create electron-vite +``` -模板的具体实现细节我相信你看两遍源码就能把它吃透了 😋 + + +![electron-vite-vue.gif](https://github.com/electron-vite/electron-vite-vue/blob/main/packages/renderer/public/electron-vite-vue.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 -├ ├── dist 构建后，根据 packages 目录生成 -├ ├── main -├ ├── preload -├ ├── renderer -├ +| ├── main +| ├── preload +| └── renderer +| ├── 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 ``` ## 一些常见的案例 @@ -61,18 +65,7 @@ - [node-fetch](https://www.npmjs.com/package/node-fetch) - [file-type](https://www.npmjs.com/package/file-type) -**Native Addons** +**Native Addons(C/C++)** - [sqlite3](https://www.npmjs.com/package/sqlite3) - [serialport](https://www.npmjs.com/package/serialport) - -## 运行效果 - - -## 请我喝杯下午茶 🥳 - -
- - -