electron vue 模仿qq登录界面

1、使用vuecli创建vue项目

我用的vue2

vue create qq_test

2、安装electron

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

3、vue项目安装Electron-builder打包工具

版本我选择的是12

vue add electron-builder

4、在vue项目的src下有个background.js文件

background.js里面有默认的配置，修改后我的配置大概如下

'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 modeawait 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 developmentwin.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 + Qif (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 Devtoolstry {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()})}
}

5、安装remote模块

因为electron12版本开始就废除了remote模块，我们需要自己安装

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

能在客户端实现最大化、最小化、关闭功能

6、代码

1、Login.vue页面（登录页面）

里面的最小化图标、关闭图标、最大化图标请自己去 iconfont-阿里巴巴矢量图标库下载

<template><div class="login" style="overflow:hidden;"><!-- 顶部 --><header class="header"><!-- 最小化按钮 --><span @click="minwin" class="iconfont icon-24gl-minimization"></span><!-- 关闭按钮 --><span @click="close" class="iconfont icon-guanbi"></span></header><main><!-- 顶部背景图 --><div class="bg"><img style="" src="../../assets/images/login.gif" /></div><!-- 登录表单组件 --><div class="body"><Login_form></Login_form></div></main><footer class="footer"><div class="zczh" @click="zc">注册账号</div><div><span title="二维码登录" class="iconfont icon-erweima"></span></div></footer></div>
</template><script>
import "@/assets/css/login.css";
import "@/assets/fonts/gb/iconfont.css";
import "@/assets/fonts/zxh/iconfont.css";
import "@/assets/fonts/ewm/iconfont.css";
import Login_form from "@/components/Login_form.vue";//网页测试要关闭,打包成软件要启动
const { remote } = window.require("electron");export default {name: "login",data() {return {};},components: {Login_form,},methods: {close() {// 只是关闭窗口，软件不退出// remote.getCurrentWindow().hide()// 关闭窗口，退出软件remote.getCurrentWindow().close();},// 最小化minwin() {// 最小化，在任务栏显示remote.getCurrentWindow().minimize()// 隐藏窗口,任务栏也隐藏// remote.getCurrentWindow().hide();},zc() {this.$router.push("/reg");},},mounted() {//显示窗口remote.getCurrentWindow().show();},
};
</script><style lang="scss" scpoed>
.login {max-width: 900px;overflow: hidden;min-width: 430px;.bg {img {width: 430px;height: 124px;object-fit: cover;}}
}
</style>

2、login.css

/**
取消全部的外边距和内边距*/
* {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;
}

3、Login_form.vue组件

里面的resetMessage信息提示是我重新封装的element组件（我就不放上去了）

里面的最小化图标、关闭图标、最大化图标请自己去 iconfont-阿里巴巴矢量图标库下载

<template><div class="login_form"><form><div class="form_item"><i class="iconfont icon-zhanghao"></i><input@focus="i1_get"@blur="i1_lose"@input="input1($event)"id="text"v-model="email"type="email":placeholder="placeholder1"@keyup.enter="login"/></div><div class="form_item"><i class="iconfont icon-mima"></i><input@focus="i2_get"@blur="i2_lose"id="text2"v-model="password"type="password":placeholder="placeholder2"@keyup.enter="login"/></div><div class="login_options"><label><div class="option_item"><input:disabled="jzmm"v-model="zddl"type="checkbox"autocomplete="off"/></div><i class="text">记住账号</i></label><label><div class="option_item"><input@click="jzmm_mm"v-model="jzmm"type="checkbox"autocomplete="off"/></div><i class="text">记住密码</i></label><i class="text wjmm">忘记密码</i></div></form><div class="buttons"><button @click="login">登录</button></div></div>
</template><script>
import "@/assets/css/login_form.css";
import "@/assets/fonts/xlk/iconfont.css";
import "@/assets/fonts/slk/iconfont.css";
import "@/assets/fonts/zh/iconfont.css";
import "@/assets/fonts/mm/iconfont.css";//网页测试要关闭,打包成软件要启动
const { remote } = window.require("electron");export default {name: "Login_form",data() {return {email: "",password: "",placeholder1: "邮箱",placeholder2: "密码",zddl: false,jzmm: false,};},methods: {i1_get() {if (!this.email) {this.placeholder1 = "";}},i2_get() {if (!this.password) {this.placeholder2 = "";}},i1_lose() {if (!this.email) {this.placeholder1 = "邮箱";}},i2_lose() {if (!this.password) {this.placeholder2 = "密码";}},input1(e) {if (e.target.value == "") {// console.log(val);this.password = "";this.placeholder2 = "密码";}},login() {var eamil_gz =/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;switch (true) {case this.email == "":this.waring("邮箱不能为空!");break;case !eamil_gz.test(this.email):this.error("邮箱格式错误");break;case this.password == "":this.waring("密码不能为空!");break;default:let data = {log_email: this.email,log_password: this.password,};this.$axios.post("/login/login", data)// 在后台查询信息 返回res结果.then((res) => {// console.log(res.data);switch (true) {case res.data.code == 200://登录成功this.success(res.data.msg);//本地存储localStorage.setItem("email", this.email);localStorage.setItem("token", res.data.token);if (this.zddl == true) {localStorage.setItem("zddl", true);} else {localStorage.removeItem("zddl");localStorage.removeItem("email");}if (this.jzmm == true) {localStorage.setItem("zddl", true);localStorage.setItem("jzmm", true);localStorage.setItem("mm", this.password);} else {localStorage.removeItem("jzmm");localStorage.removeItem("mm");}this.$router.push("/chat_index");//登录成功跳转会有点闪屏，先隐藏，到另外一个路由再显示remote.getCurrentWindow().hide();//登录之后设置窗口在电脑桌面显示位置remote.getCurrentWindow().setPosition(386, 192);break;case res.data.code == 404://邮箱不存在this.error(res.data.msg);break;case res.data.code == 300://密码错误this.error(res.data.msg);break;case res.data.code == 400://用户异常this.error(res.data.msg);break;default://未知错误this.error(res.data.msg);break;}}).catch((error) => {//报错});break;}},//记住密码jzmm_mm() {if (this.zddl == false) {this.zddl = true;}this.jzmm = true;},// 警告提示waring(title) {this.$resetMessage({message: `${title}`,type: "warning",});},// 成功提示success(title) {this.$resetMessage({message: `${title}`,type: "success",});},// 错误提示error(title) {this.$resetMessage.error(`${title}`);},},mounted() {// 读取本地存储账号信息if (localStorage.getItem("zddl")) {this.zddl = true;this.email = localStorage.getItem("email");}if (localStorage.getItem("jzmm")) {this.jzmm = true;this.password = localStorage.getItem("mm");}if (localStorage.getItem("email")) {this.email = localStorage.getItem("email");}if (!this.email) {document.getElementById("text").focus();} else {document.getElementById("text2").focus();}},
};
</script>

4、login_form.css

.login_form{-webkit-app-region: drag;background-color: #FFFFFF;}
.login_form form {padding: 10px 90px 0 90px;}.form_item {height: 40px;position: relative;}.form_item div {float: right;margin-right: 5px;
}.form_item i.iconfont {position: absolute;top: 5px;}.form_item input {outline: none;border: none;padding-left: 30px;font-size: 16px;width: 230px;height: 30px;border-bottom: 1px solid #CCC;user-select: none;-webkit-app-region: no-drag;
}.buttons {text-align: center;
}.buttons button {background-color: #0786b4;border: none;width: 250px;color: #FFFFFF;height: 35px;cursor: pointer;font-size: 14px;border-radius: 4px;outline: none;-webkit-app-region: no-drag;user-select: none;
}
.buttons button:hover {background-color: #0aaae4;border: none;width: 250px;color: #FFFFFF;height: 35px;cursor: pointer;font-size: 14px;border-radius: 4px;outline: none;-webkit-app-region: no-drag;user-select: none;
}.checkbox {display: flex;justify-content: center;align-items: center;
}.footer {display: flex;justify-content: space-between;padding: 5px 15px 5px 15px;align-items: center;
}.login_options {margin-bottom: 10px;margin-top: 5px;
}.login_options .option_item {display: inline-block;align-items: center;width: 13px;height: 13px;margin-right: 5px;position: relative;cursor: pointer;top: 2px;-webkit-app-region: no-drag;
}.login_options .option_item input {/* font-size: 13px; */-webkit-app-region: no-drag;
}.login_options i.text {display: inline-block;margin-right: 14px;font-size: 13px;font-style: normal;user-select: none;-webkit-app-region: no-drag;
}.login_options .option_item span.checked {position: absolute;top: -4px;right: -3px;font-weight: bold;display: inline-block;width: 20px;height: 20px;cursor: pointer;
}.option_item span.checked img {width: 100%;height: 100%;
}input[type="checkbox"]+span {opacity: 0;
}input[type="checkbox"]:checked+span {opacity: 1;
}.wjmm {cursor: pointer;color: rgb(139, 134, 134);
}.wjmm:hover {cursor: pointer;color: rgb(19, 18, 18);
}

5、package.json文件

{"name": "qq_test","version": "0.1.0","private": true,"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","electron:build": "vue-cli-service electron:build","electron:serve": "vue-cli-service electron:serve","postinstall": "electron-builder install-app-deps","postuninstall": "electron-builder install-app-deps"},"main": "background.js","dependencies": {"axios": "^0.27.2","core-js": "^3.8.3","element-ui": "^2.15.9","express": "^4.18.1","qs": "^6.11.0","socket.io": "^4.5.1","socket.io-client": "^3.1.0","vscode-material-icon-theme-js": "^1.0.7","vue": "^2.6.14","vue-router": "^3.5.1","vue-socket.io": "^3.0.10","vuex": "^3.6.2"},"devDependencies": {"@vue/cli-plugin-babel": "~5.0.0","@vue/cli-plugin-router": "~5.0.0","@vue/cli-plugin-vuex": "~5.0.0","@vue/cli-service": "~5.0.0","electron": "^12.0.0","electron-devtools-installer": "^3.1.0","sass": "^1.32.7","sass-loader": "^12.0.0","vue-cli-plugin-electron-builder": "~2.1.1","vue-template-compiler": "^2.6.14"},"browserslist": ["> 1%","last 2 versions","not dead"]
}

6、main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'import axios from "axios";      //引入axiosVue.prototype.$axios = axios;   //axios跟很多第三方模块不同的一点是它不能直接使用use方法，而是用这种方法//配合文章第4步解释        本地网站
axios.defaults.baseURL = 'http://www.electron.com/index.php/api';//开发环境//引入element组件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);//重写提示框只提示一次
import resetMessage from '@/assets/js/resetMessage'
Vue.prototype.$resetMessage = resetMessageVue.use(new VueSocketIO({debug: false, // 宝塔   IP:端口号      （生产环境）connection: SocketIO('http://127.0.0.1:3000', {//开发环境autoConnect: false // 取消自动连接     }),extraHeaders: { 'Access-Control-Allow-Origin': '*' }})
)//客户端禁止按鼠标返回键返回上一个路由
window.addEventListener('popstate', function() {history.pushState(null, null, document.URL)
})Vue.config.productionTip = falsenew Vue({router,store,render: h => h(App)
}).$mount('#app')

7、效果图

本地测试

npm run electron:serve

electron vue 模仿qq登录界面相关推荐

pyqt5登录界面设计——模仿qq登录界面，可登录注册（数据库）
pyqt5登录界面设计--模仿qq登录界面一.简单易用的可直接登录的界面--账号密码程序写死 1.1.效果图: 1.2.视频效果图 3.代码说明 4.使用示例 5.全部源码见: 二.带数据库的可登录 ...
Android 模仿QQ登录界面解决软键盘遮挡问题
Android 软件盘弹出可能会遮挡住界面上的某些控件.当 windowSoftInputMode 为 adjustPan 时,一般不会挡住 EditText,但是假如 EditText 下面是一个登 ...
Qt模仿QQ登录界面（一）
这两天研究qt,练习时做了个仿QQ登录界面,我这次实现的比较简单,先在这里记录一下,以后有空了会继续完善的. (一)效果图这里使用我的qq号测试的如图: (二)工程文件 (三)代码实现 mainwi ...
java代码完全手写模仿qq登录界面
这是我模仿QQ2015版界面,实现的基本功能有登陆验证,重置等,当然直接复制代码运行是不一样的,还要注意自己插入自己的图片. 结果截图如下所示: import java.awt.BorderLayou ...
android模仿qq登录界面,初识Android二之小试牛刀模仿实现qq登陆界面
初识Android二之小试牛刀模仿实现qq登陆界面.俗话说得好,老师踢开门,修行在自己.勉勉强强学完生命周期,然后悠悠闲闲听了两节课后,老师就布置了一个登陆界面的实现,于是,磕磕绊绊的修行之路开始了. ...
Duilib界面库 Demo实例XML编写规则模仿QQ登录模块
下面是个人自己动手编写的XML文件,主要是实现 QQ登录界面的设计下面代码,粘贴之后,有点乱,实现效果如上图所示. <?xml version="1.0" encodin ...
QQ登录界面模仿和事件监听（下）
我们到了QQ登录界面模仿这个环节了. 当开始做一个小小的程序的时候,就发现事件监听的无处不在.因为如果让一个程序有能动性,人使用时根据需要程序也能做出相应的反应,很多时候都要使用事件监听. (当时俺的 ...
java实现qq登录界面_java模仿实现QQ登录界面
本文实例为大家分享了java模仿实现qq登录界面的具体代码,供大家参考,具体内容如下这是我模仿QQ2015版界面,实现的基本功能有登陆验证,重置等,当然直接复制代码运行是不一样的,还要注意自己插入自 ...
java仿qq_java模仿实现QQ登录界面
本文实例为大家分享了java模仿实现qq登录界面的具体代码,供大家参考,具体内容如下这是我模仿QQ2015版界面,实现的基本功能有登陆验证,重置等,当然直接复制代码运行是不一样的,还要注意自己插入自 ...