# Week1D<br>
## Electronize Vue3 App with vite
[TOC]
----
Made by FanRende (030Mortal#5525)
<img src="https://i.pinimg.com/1200x/28/a0/b9/28a0b9140e786da8a5f84c911c63a128.jpg" width="60%">
---
## Electron 
一個用於包裝前端為應用程式的工具，使用 Webview 在應用內顯示網頁畫面
----
- 跨平台
- Mac, Linux, Windows
- 調用作業系統 API
- 使用 Electron 的應用程式
- VS Code
- Discord
----
### main.js(.ts)
Electron app 的 entry point
定義 electron 啟動後的行為
像是建立視窗 定義視窗內容
----
### preload.js(.ts)
介於 app ready 與網頁開始載入間的行為
可以定義一些 OS 相關的 API
---
## 專案架構
```
.
├── dist
│ ├── index.html
│ ├── assets
│ └── fonts
├── dist_electron
│ ├── 嘜唄鍮的字幕編輯器 1.1.0.exe
│ ├── linux-unpacked
│ ├── mac
│ └── win-unpacked
├── electron
│ ├── main.ts
│ └── preload.ts
├── public
│ └── fonts
├── src
├── index.html
├── package.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts
```
---
參考 / 延伸閱讀:
- [Vite+Electron快速构建一个VUE3桌面应用(一)](https://github.com/Kuari/Blog/issues/52)
- [Vite+Electron快速构建一个VUE3桌面应用(二)——动态模块热重载](https://github.com/Kuari/Blog/issues/53)
- [Vite+Electron快速构建一个VUE3桌面应用(三)——打包](https://github.com/Kuari/Blog/issues/54)
- [Building a Vue 3 Desktop App with Vite and Electron](https://learnvue.co/articles/vue-and-electron-desktop-apps)
<div class="flex-container">
<div class="flex-content">
</div>
<div class="flex-content">
</div>
</div>
<style>
.gray {
color: gray;
font-size: 0.5em;
}
.slides .rust {
font-size: 0.75em !important;
line-height: 1.2em !important;
}
.mermaid {
background-color: rgba(1, 1, 1, .2) !important;
}
.slides code {
background-color: #444 !important;
border-radius: 10px;
white-space : pre-wrap !important;
padding-right: 0.1em;
padding-left: 0.1em;
}
.code-wrapper code {
background-color: inherit !important;
border-radius: inherit;
}
.flex-container {
display: flex;
justify-content: center;
}
.flex-content {
flex-grow: 1;
font-size: 0.7em;
}
.small {
font-size: 0.9em;
}
</style>
<style>
/* Customize website's scrollbar like Mac OS */
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(128, 128, 128, 1);
-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
</style>
{"slideOptions":"{\"theme\":\"dark\",\"transition\":\"fade\",\"previewLinks\":false}","description":"","title":"Week1D Electronize Vue3 App with vite","contributors":"[{\"id\":\"82f6b599-31b8-4112-9dc5-7d7b7d6a3ebb\",\"add\":2716,\"del\":75}]"}