electron vue 模仿qq登录界面功能实现_vue.js_

vue create qq_test

npm install electron -g //or npm install electron@12.0.11 //老版本

vue add electron-builder

'use strict' import { app, protocol, BrowserWindow, Menu, Tray } from 'electron' import { createProtocol } from 'vue-cli-plugin-electron-builder/lib' import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer' const isDevelopment = process.env.NODE_ENV !== 'production' // Scheme must be registered before the app is ready protocol.registerSchemesAsPrivileged([ { scheme: 'app', privileges: { secure: true, standard: true } } ]) async function createWindow() { // Create the browser window. const win = new BrowserWindow({ width: 432, height: 331, alwaysOnTop: true,//窗口一直保持在其他窗口前面 modal: true, frame: false, darkTheme: true, resizable: false,//用户不可以调整窗口 center: true, // 窗口居中 transparent: false,//窗口透明 show: false,// 显示窗口将没有视觉闪烁（配合下面的ready-to-show事件） hasShadow: true,//窗口是否有阴影 webPreferences: { // Use pluginOptions.nodeIntegration, leave this alone // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info // nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION, // contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION, devTools: true,//客户端可以打开开发者工具（在客户端打开快捷键：ctrl+shift+i） nodeIntegration: true, enableRemoteModule: true, // 使用remote模块(electron12版本就开始废除了,需要我们自己安装remote模块) contextIsolation: false, //解决axios请求跨域问题（不推荐，不安全，但简单好用） webSecurity: false, }, }) if (process.env.WEBPACK_DEV_SERVER_URL) { // Load the url of the dev server if in development mode await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL) if (!process.env.IS_TEST) win.webContents.openDevTools() } else { createProtocol('app') // Load the index.html when not in development win.loadURL('app://./index.html') } } // Quit when all windows are closed. app.on('window-all-closed', () => { // On macOS it is common for applications and their menu bar // to stay active until the user quits explicitly with Cmd + Q if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { // On macOS it's common to re-create a window in the app when the // dock icon is clicked and there are no other windows open. if (BrowserWindow.getAllWindows().length === 0) createWindow() }) // This method will be called when Electron has finished // initialization and is ready to create browser windows. // Some APIs can only be used after this event occurs. app.once('ready-to-show', () => { win.show(); }) app.on('ready', async () => { if (isDevelopment && !process.env.IS_TEST) { // Install Vue Devtools try { await installExtension(VUEJS_DEVTOOLS) } catch (e) { console.error('Vue Devtools failed to install:', e.toString()) } } createWindow() }) // Exit cleanly on request from parent process in development mode. if (isDevelopment) { if (process.platform === 'win32') { process.on('message', (data) => { if (data === 'graceful-exit') { app.quit() } }) } else { process.on('SIGTERM', () => { app.quit() }) } }

npm install @electron/remote --save //or cnpm install @electron/remote --save

/** 取消全部的外边距和内边距 */ * { padding: 0; margin: 0; } /*设置窗口的样式*/ .login { cursor: default; /*设置手型*/ /* border: 1px solid red; */ /*加一个边框 调试样式 最后要删除或者更改**/ width: 430px; /*设置宽度 必须要和主进程中设置的一样 不能大于主进程中设置的宽度 否则会出现滚动条*/ height: 329px; /*设置高度 必须要和主进程中设置的一样 不能大于主进程中设置的高度 否则会出现滚动条*/ position: relative; /*设置为相对定位*/ /* border-radius: 4px; */ /*设置圆角*/ border: 1px solid #464545; /* 拖 */ -webkit-app-region: drag; /* 禁止滚动条 */ overflow: hidden; } /** header的样式 header中只会有一个关闭按钮 处于右上角 */ .login header.header { position: absolute; /*设置绝对定位 因为背景在他下面*/ height: 30px; /*设置高度*/ /* border-radius: 20px 20px 0 0; */ /*给header的左上角 右上角设置圆角 不然会出现很尴尬的页面*/ width: 428px; /* 因为设置了绝对定位 设置宽度*/ /* background: rgba(255, 255, 255, 0.2); */ /*暂时设置的 后面要删除或者更改*/ text-align: right; } /** 背景 */ .login main .bg { height: 124px; /*设置高度*/ width: 430px; /*设置宽度 也可以不用设置 因为这个元素没有设置绝对定位 所以默认就是100%*/ /* border-radius: 4px 4px 0 0; */ /*给左上角 右上角设置圆角 不然会出现很尴尬的页面 这里和header重合在一起了*/ /* background: url("@/assets/images/login.gif") 10px; */ background-size: 100%; } /** 放置表单的元素 */ .login main .body { width: 428px; /*设置宽度 也可以不用设置 因为这个元素没有设置绝对定位 所以默认就是100%*/ height: 200px; /*设置高度 这里的高度是 主窗口(326) - footer(30) - 背景(124) 因为header设置了绝对定位 所以不用关 */ /* background: green; */ /*暂时设置的 后面要删除或者更改*/ } .login footer.footer { position: absolute; /* 设置绝对定位 要让他处于窗口的最底部*/ height: 30px; /*设置高度 */ /* background: red; */ /*暂时设置的 后面要删除或者更改*/ bottom: 0; /*让footer处于底部*/ width: 397.99px; /* 因为设置了绝对定位 设置宽度*/ /* border-radius: 0 0 5px 5px; */ background-color: #FFFFFF; } .login header.header span{ display: inline-block; height: 30px; width:30px; text-align: center; line-height: 30px; color:#E4393c; cursor: pointer; } .login header.header span:hover{ background-color: rgba(255,255,255,0.6); cursor: pointer; } .zczh{ cursor: pointer; color: #7c7a7a; user-select: none; -webkit-app-region: no-drag; } .zczh:hover{ cursor: pointer; color: black; user-select: none; -webkit-app-region: no-drag; }