Electron是一个开源的桌面应用程序开发框架，它允许开发者使用Web技术（如 HTML、CSS 和 JavaScript）构建跨平台的桌面应用程序，它的出现极大地简化了桌面应用程序的开发流程，让更多的开发者能够利用已有的 Web 开发技能来构建功能强大且跨平台的应用程序，这对于提升开发效率和应用程序的快速交付具有重要意义。
本文将带领您进入 Electron 的世界，探索如何通过其强大的功能和灵活的架构，为您的应用程序实现一个完善的用户登录流程，具体的框架搭建和基本配置这里就不再赘述了，可以参考我之前的文章：地址 ，里面的路由和组件库的配置，这里就不再赘述了！
目录
框架搭建
首页搭建
登录框搭建
跳转首页
框架搭建
这里就仿照一下新版QQ进行登录界面的内容进行编写：
首先我们来到主进程对用户的登录界面进行一个简单的处理，代码如下所示：
然后我们在App根组件中设置通配符选项，然后设置页面不可以进行文字复制：
<template>
<div class="container">
<router-view></router-view>
</div>
</template>
<script setup lang="ts">
</script>
<style lang="scss">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none; /* 禁止选择文本 */
-webkit-user-select: none; /* Safari 和 Chrome 的兼容性 */
-moz-user-select: none; /* Firefox 的兼容性 */
-ms-user-select: none; /* IE 和 Edge 的兼容性 */
}
.container {
width: 100%;
height: 100%;
}
</style>
最终达到的效果如下所示：
然后这里我们需要用到element-plus组件库的内容，配置参考开局引出的链接即可，
首页搭建
然后这里我们借助elementPlus组件库中的icon图标设置登录页顶部右侧的一些小按钮，然后左侧设置一个通告栏的效果，在通过栏处我们通过axios拿到对应的接口数据：
let famousRemark = ref('') // 名言数据
// 获取名言数据
const getFamousRemark = () => {
axios.get<any, any>('https://api.uomg.com/api/rand.qinghua').then((res) => {
famousRemark.value = res.data.content
})
}在html代码中，我们拿到名言的接口数据，然后通过animationiteration函数设置每执行完一次动画效果之后，重新调用接口函数：
<div class="header">
<div class="header-left">
<div class="header-icon">
<el-icon color="red"><VideoCamera /></el-icon>
</div>
<div class="header-text">
<span @animationiteration="getFamousRemark">{{ famousRemark }}</span>
</div>
</div>
<div class="header-right">
<div class="emplace" @click="handleEmplace">
<el-icon :size="15"><Connection class="icon" /></el-icon>
</div>
<div class="close" @click="handleClose">
<el-icon :size="15"><Close /></el-icon>
</div>
</div>
</div>在首页这里我们也给出了一个背景图的效果，最终呈现的效果如下所示：
然后我们给头部右侧的图标设置一下点击事件，这里我们借助electron中的渲染进行的函数往主进程发送对应的信息，获取版本数据是主进程往渲染进程发数据，处理关闭事件是渲染进程往主进程发送数据，如下所示：
const { ipcRenderer } = require('electron')
let versions = ref() // 版本数据
let dialogVisible = ref(false) // 弹窗
// 获取版本事件
const handleEmplace = async () => {
const result = await ipcRenderer.invoke('getVersion')
versions.value = result
dialogVisible.value = true
}
// 处理关闭事件
const handleClose = () => {
ipcRenderer.send('close-main-window')
}然后我们在主进程中开启渲染进程可以使用node模块的配置：
然后调用主进程的ipcMain函数进行数据的传递与接收：
// 获取版本数据
ipcMain.handle('getVersion', () => {
const versions = {
electron: process.versions.electron,
node: process.versions.node,
chrome: process.versions.chrome, // 如果需要的话，也可以获取 Chrome 的版本
};
return versions;
})
// 关闭窗口
ipcMain.on('close-main-window', (event) => {
event.preventDefault()
mainWindow.close()
})最终呈现的效果如下所示：
登录框搭建
接下来借助elementPlus中的表单组件进行一个登录框页面的搭建，这里我把表单元素和底部的组件抽离出一个单独的组件进行设置：
<div class="content">
<div class="content-title">MY QQ</div>
<div class="content-image">
<img :src="avatar" alt="头像" />
</div>
<div class="content-login">
<LoginForm></LoginForm>
</div>
<div class="login-footer">
<Footer></Footer>
</div>
</div>页面搭建很简单，这里就不再一一赘述了，最终呈现的效果如下所示：
然后底部的组件的话，这里使用了一些小的svg增加了一点趣味性：
跳转首页
当我们要跳转的首页的时候，肯定要进行一个页面的大小的调整，不可能也是登录页的大小，所以我们在进入到首页的时候，页面加载完成时向主进程发送一个消息，通知主进程调整页面的大小：
onMounted(() => {
ipcRenderer.invoke('home-window-size')
})来到主进程，我们设置要调整的窗口大小已经设置其他初始化的时候页面的配置：
// 首页窗口大小
ipcMain.handle('home-window-size', () => {
mainWindow.setSize(800, 600) // 设置窗口大小
mainWindow.setMaximizable(true) // 允许最大化窗口
mainWindow.center() // 居中窗口
mainWindow.setResizable(true) // 允许窗口缩放, 默认是 false
})然后这里我们再在首页设置一个跳转到登录页的按钮：
<template>
<div class="home">
<div class="header">头部</div>
<div class="container">
<div>登录界面</div>
<el-button type="primary" @click="goBack">跳转登录页</el-button>
</div>
</div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
const { ipcRenderer } = require('electron')
const router = useRouter()
const goBack = () => {
router.push('/')
}
onMounted(() => {
ipcRenderer.invoke('home-window-size')
})
</script>在登录页面，我们在页面刚加载的时候也向主进程发送一个跳转窗口大小的指令：
onMounted(() => {
ipcRenderer.invoke('login-window-size')
})在主进程中也通样设置一下登录页面的窗口设置：
// 登录页窗口大小
ipcMain.handle('login-window-size', () => {
mainWindow.setSize(320, 450) // 设置窗口大小
mainWindow.setMinimizable(true) // 允许最小化窗口
mainWindow.center() // 居中窗口
mainWindow.setResizable(false) // 允许窗口缩放, 默认是 false
})然后默认配置上，我们设置不可双击最大化，然后在具体需要最大化的地方再调用下面的函数即可，这里我们设置登录页不可最大化，然后首页可以：mainWindow.setMaximizable(true)
最终呈现的效果如下所示：
项目地址：地址。
