Vite+electron创建程序
创建程序
新建一个vite
安装electron
1
| npm install --save-dev electron
|
你的package.json文件应该像这样：
1
2
3
4
5
6
7
| {
"name": "ialtone-app",
"version": "1.0.0",
"description": "Hello World!",
"main": "main.js",
"author": "ialtone",
}
|
将package.json中”script”中的内容修改为：
1
2
3
4
5
6
7
| {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"electron:dev": "electron-builder",
"start": "electron ."
}
|
安装依赖
在文件夹中创建main.js文件并在其中写入示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
| // main.js
// electron 模块可以用来控制应用的生命周期和创建原生浏览窗口
const { app, BrowserWindow } = require('electron')
const path = require('path')
const createWindow = () => {
// 创建浏览窗口
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
// 加载 index.html
mainWindow.loadFile('index.html')
// 打开开发工具
// mainWindow.webContents.openDevTools()
}
// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
// 在 macOS 系统内, 如果没有已开启的应用窗口
// 点击托盘图标时通常会重新创建一个新窗口
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此, 通常
// 对应用程序和它们的菜单栏来说应该时刻保持激活状态,
// 直到用户使用 Cmd + Q 明确退出
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
// 在当前文件中你可以引入所有的主进程代码
// 也可以拆分成几个文件，然后用 require 导入。
|
再创建一个preload.js文件并写入：(可选)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| // preload.js
// 所有的 Node.js API接口 都可以在 preload 进程中被调用.
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const dependency of ['chrome', 'node', 'electron']) {
replaceText(`${dependency}-version`, process.versions[dependency])
}
})
|
修改style.css
将src中的style.css修改为如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| html,
body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
user-select: none;
/* 禁止选中文本 */
}
#app {
width: 100%;
height: 100%;
background-color: white;
border-radius: 20px;
overflow: hidden;
/* 防止滚动和元素溢出窗口 */
}
/* 设置选中区域背景颜色 */
*::selection {
background-color: #faedc7;
}
/* 隐藏滚动条 */
/* *::-webkit-scrollbar{
display: none;
} */
/* 去除输入框聚焦时的清空图标 */
input::-webkit-search-cancel-button {
display: none;
}
|
修改vite启动端口
打开vite.config.js
将export default修改为：
1
2
3
4
5
6
7
| export default defineConfig({
server: {
port: 8081
},
plugins: [vue()],
base: './'
})
|