Electron 開發筆記 - 使用 Vue.js 3 與 Vite 和最新 Electron Stable Release (20.x.x)

週末繼續把玩一下 Electron framework 也複習 Vue.js ，一直在想要怎樣兜再一起比較方便，類似的整合一直都有：

• github.com/electron-vite/electron-vite-vue
• github.com/michalzaq12/electron-nuxt
• github.com/SimulatedGREG/electron-vue
• ...

等等，後來自己想了一下，乾脆練習配置吧！自己先規劃想要的架構：

1. 盡量把高變動的 code 都擺在 src 目錄中
2. 盡量讓 vue.js code 可以統一在某個目錄中
3. 直接使用最新的 Vue.js 及其最新工具
4. 使用最新的 Electron Stable Release
5. 盡量簡單，甚至不用 TypeScript ，讓其他新手想跨入也方便

就這樣，採用了 Electron 20.0.0 (2022.08) 和 Vue.js + Vite 環境

於是乎，先摸索了一個出來：github.com/changyy/node-electron-vue-vite

% tree src 

src

├── html

│   └── mainRenderer

│       ├── index.html

│       ├── src

│       │   ├── App.vue

│       │   ├── components

│       │   │   └── HelloWorld.vue

│       │   └── main.js

│       └── vite.config.js

├── main

│   └── index.js

├── preload

│   └── mainRenderer.js

└── renderer

    ├── index.js

    └── mainRenederer.js

7 directories, 9 files

之後再來想想看有什麼題目可以把玩吧！