huanghs/electron-vite-vue
1
0
Fork 0
mirror of https://github.com/electron-vite/electron-vite-vue synced 2024-10-12 15:39:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: update

Browse Source
This commit is contained in:
草鞋没号 2022-04-26 09:19:55 +08:00
parent cc0cdf422d
commit 2d1726e3ed
2 changed files with 61 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
README.md
View File

@ -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
```
<!-- [![quick-start](https://asciinema.org/a/483731.svg)](https://asciinema.org/a/483731) -->
![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
<img width="400px" src="https://raw.githubusercontent.com/caoxiemeihao/blog/main/electron-vue-vite/screenshot/electron-15.png" />
## <!-- Wechat | | -->请我喝杯下午茶 🥳
<div style="display:flex;">
<!-- <img height="333px" src="https://raw.githubusercontent.com/caoxiemeihao/blog/main/assets/wechat/group/qrcode.jpg" />
&nbsp;&nbsp;&nbsp;&nbsp; -->
<img height="333px" src="https://raw.githubusercontent.com/caoxiemeihao/blog/main/assets/wechat/%24qrcode/%24.png" />
</div>

67
README.zh-CN.md
View File

@ -10,43 +10,47 @@
🥳 Electron + Vite + Vue 整合模板 -- **结构简单，容易上手！**
## 快速开始
[![quick-start](https://asciinema.org/a/483731.svg)](https://asciinema.org/a/483731)
## 概述
&emsp;&emsp;这是一个追求精简的`Electron`类整合模板，只保持最基本的文件、最基本的依赖、最基本的功能；而不是大而全的、臃肿的设计。这样做的目的是能确保模板足够灵活。
📦 开箱即用
💪 支持 C/C++ 模块
🔩 支持在渲染进程中使用 Electron、Node.js API
🌱 结构清晰，可塑性强
🖥 很容易实现多窗口
所以说如果你是对 -- 工程模板追求精简的 Coder，或者刚入世的小白想弄明白`Electron`整合类模板最基础的工作原理，亦或者你是大神只是想偷懒少干点活；那么这个模板最合适你不过了。
## 快速开始
尽管如此，我还是希望你对`Electron` `Vite`有一定的基础；因为除了项目结构简单外，这份`README`也显得 “精简” 。
```sh
npm create electron-vite
```
模板的具体实现细节我相信你看两遍源码就能把它吃透了 😋
<!-- [![quick-start](https://asciinema.org/a/483731.svg)](https://asciinema.org/a/483731) -->
![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)
## 目录结构
&emsp;&emsp;一旦启动或打包脚本执行过，会在根目录产生 **`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)
## 运行效果
<img width="400px" src="https://github.com/caoxiemeihao/blog/blob/main/electron-vue-vite/screenshot/electron-15.png?raw=true" />
## <!--微信 | | -->请我喝杯下午茶 🥳
<div style="display:flex;">
<!-- <img height="333px" src="https://raw.githubusercontent.com/caoxiemeihao/blog/main/assets/wechat/group/qrcode.jpg" />
&nbsp;&nbsp;&nbsp;&nbsp; -->
<img height="333px" src="https://raw.githubusercontent.com/caoxiemeihao/blog/main/assets/wechat/%24qrcode/%24.png" />
</div>