electron-vite-vue/README.md
2021-06-20 19:10:27 +08:00

78 lines
1.9 KiB
Markdown

# electron-vue-vite
`Electron` + `Vue3` + `Vite2` integration
## How and Why
- `Vite` is the scaffold of the future
## Command
- npm run dev
- npm run build
## Note
- In the development environment, we need to transform the `Electron` related API into commonjs
- And you can only use ESM
- So far, I've written an [vitejs-plugin-electron](https://github.com/caoxiemeihao/vitejs-plugins/tree/main/electron) plugin
## Usage
- vite.config.ts
```ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vitejs-plugin-electron'
export default defineConfig((env) => ({
plugins: [
vue(),
electron(),
],
// other config...
}))
```
> In "src/render/main.ts" file
```ts
// You code
import { ipcRenderer } from 'electron'
import Store from 'electron-store'
// Will be generate in development mode
const { ipcRenderer } = require("electron")
const Store = require("electron-store")
```
- It works!
- 🚀
- 开发模式下 Electron 相关的 API 需要转换成 commonjs
- 并且你只能用 ESM
- 为此我写了一个 [vitejs-plugin-electron](https://github.com/caoxiemeihao/vitejs-plugins/tree/main/electron) 插件
## electron-vue-vite-webpack
- If you're worried, you can consider using this project<br>
[https://github.com/caoxiemeihao/electron-vue-vite-webpack]( https://github.com/caoxiemeihao/electron-vue-vite-webpack)<br>
The production environment is packaged with 'webpack'
- 🚀
- 如果你怕踩坑,可以考虑用这个项目<br>
[https://github.com/caoxiemeihao/electron-vue-vite-webpack](https://github.com/caoxiemeihao/electron-vue-vite-webpack)<br>
生产环境使用 `webpack` 打包的
---
![](https://raw.githubusercontent.com/caoxiemeihao/electron-vue-vite/main/screenshot/800x600-2.png)
---
## 微信讨论
![](https://raw.githubusercontent.com/caoxiemeihao/electron-vue-vite/main/blog/wx/qrcode.jpg)
---
## License
[MIT License](https://opensource.org/licenses/MIT)