本文为Electron+Vue3开发桌面端软件系列文章第一篇
通过本文，你将获得：
如何快速搭建一个Electron项目 了解Electron的基本配置及修改
技术选型
开发桌面端有如下几种技术方案：
-
Electron：使用HTML、CSS和JS构建跨平台的桌面应用程序，基于Chromium和Node.js。 -
NW.js：（也称node-webkit）类似于Electron。 -
React Native：使用React和JS。 -
Flutter：使用Dart编程语言，可构建高度定制的桌面应用程序。
本文这里选择Electron。
创建项目
基于electron-vite创建，执行pnpm create @quick-start/electron
启动项目，会自动打开一个electron应用，如下图所示：
出现如上画面说明，基于electron-vite脚手架创建的项目成功了。
改造项目结构
首先来认识一下默认的项目目录结构。
|-src
|-main
|-index.js // electron主程序执行
|-preload
|-index.js // 预加载脚本的包
|-renderer
|-src // 业务代码
|-index.html // 渲染页面
那对应的是，官网的这张图：
明白了项目结构，那最先可以改造的可以从renderer下手。renderer下就是常见的Vue3项目代码，清理App.vue中代码，修改成如下：
<template>Electron TodoList</template>
<script setup></script>
<style lang="less"></style>
画面会实时更新，如下图所示：
配置修改
修改renderer下的代码只会更新主窗口界面，那如何修改应用窗口的配置？例如窗口上名称，图标等。
标题
renderer/index.html，修改title
<title>Electron TodoList</title>
窗口上的标题会随之改变，如下图所示：
图标
准备一个png图片，尺寸建议在256*256。
在根目录下的resources文件夹下，可以同名替换icon.png也可以自定义名称添加。例如，我在resources下放入一个图片chickenLeg.png。
窗体的配置都在main/index.js中，new一个BrowserWindow时传入配置项，其中就有icon的配置。
import chickenLeg from '../../resources/chickenLeg.png?asset'
const mainWindow = new BrowserWindow({
...
icon: chickenLeg
})
main代码修改之后，都需要重新执行pnpm dev，正常如期显示：
其他配置
BrowserWindow其他配置参数，可以参考官网：https://www.electronjs.org/docs/latest/api/browser-window#new-browserwindowoptions
常见的有：
-
width：窗口的宽度，默认值为 800。 -
height：窗口的高度，默认值为 600。 -
show：窗口是否在创建时显示，默认值为 true。 -
alwaysOnTop：窗口是否永远在别的窗口的上面，默认值为 false。 -
frame：设置为 false 时可以创建一个无边框窗口，默认值为 true。 -
backgroundColor：窗口背景色，默认值为 #FFF（白色）。 -
autoHideMenuBar：自动隐藏菜单栏，除非按了Alt键，默认值为 false。
总结
-
通过脚手架 electron-vite创建Electron项目，执行pnpm create @quick-start/electron。 -
在 BrowserWindow中修改Electron相关配置。
原文始发于微信公众号（前端一起学）：如何快速搭建Electron应用?
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/191367.html
