1.与普通vue项目一样安装node、淘宝源等，然后再

electron官网：https://www.electronjs.org/

安装electron：

npm install electron

安装yarn命令：

npm install yarn -g

安装依赖：yarn install 或npm install，建议yarn install

项目启动命令：

yarn run electron:serve

所有命令

2.项目目录如下，我这里是webstorm开发，入口文件是background.js，与普通vue项目入口main.js是不太一样的，项目所需要的依赖、第三方插件、样式以及路由、缓存、api请求样例都已经有了，剩下的只是对应实际的业务功能真正开发了

3.如何实现与QQ靠边自动隐藏的功能？

这里采用监控鼠标获得焦点和失去窗口焦点的思想来实现，如图，靠右边：

靠左边：

靠顶部，因为录屏的问题，无法录得整个窗口：

右键设置窗口

访问设置：

通用设置

版本更新：

4. 打包，命令：yarn run electron:build，两种安装方式，加压免安装和exe安装文件

5.配置文件，vue.config.js

nsis: {oneClick: false, // 是否一键安装allowElevation: true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。allowToChangeInstallationDirectory: true, // 允许修改安装目录installerIcon: "public/favicon.ico", // 安装图标uninstallerIcon: "public/favicon.ico", //卸载图标installerHeaderIcon: "public/favicon.ico", // 安装时头部图标createDesktopShortcut: true, // 创建桌面图标createStartMenuShortcut: true, // 创建开始菜单图标shortcutName: "爱芳芳助手", // 图标名称license: "LICENSE.txt",},

6.源码下载

有遇到问题请留言或私聊！！！

electron+vue+elementui实现类似QQ窗口靠边自动边缘隐藏，electron+vue桌面应用项目框架搭建相关推荐

VC 仿QQ窗口靠边自动收缩隐藏效果
一.观察模仿前最重要的一步就是观察,经过半天对QQ的摆弄和摸索,总结出了以下一些特点: 1.窗口开始粘附时,检测的是鼠标坐标与桌面边界的距离,特别地,粘附在下面的时候,检测的是与任务栏的距离: 2. ...
MFC仿QQ窗口靠边自动收缩隐藏效果（附源代码）
/*在原创的基础上做了部分修改*/ 一.[观察] 模仿前最重要的一步就是观察,经过半天对QQ的摆弄和摸索,总结出了以下一些特点: 1.窗口开始粘附时,检测的是鼠标坐标与桌面边界的距离,特别地,粘附在下 ...
C#实现仿QQ窗口靠边自动隐藏
今晚做网络通讯的实验,想实现下类似QQ滴窗口靠近屏幕上方自动隐藏,上网搜了下代码,发现这个比较简单,而且又很好的实现了所需功能,特记录如下,主要用了三个计时器来实现,开始时设置计时器1启用,计时器2 ...
[Vue 牛刀小试]：第十六章 - 针对传统后端开发人员的前端项目框架搭建
一.前言在之前学习 Vue 基础知识点的文章中,我们还是采用传统的方式,通过在 html 页面上引用 vue.js 这个文件,从而将 Vue 引入到我们的项目开发中.伴随着 Node.js 的出现, ...
vue+elementui实现app布局小米商城，样式美观大方，功能完整
目录一.项目效果在线预览二.效果图 1.首页效果图 2.分类,动态分类+商品数据根据所属分类动态切换 3.购物车,动态添加购物车(增.删.改.查) 4.我的 5.登录注册 6.商品详情 7.搜索( ...
vue+elementui实现联想购物商城，样式美观大方
目录一.首页效果图对比 1.联想商城官方截图: 2.作者项目效果图: 二.商品详情效果图对比 1.联想官方截图: 2.作者项目截图: 三.购物车 1.效果图四.登录注册 1.手机号登录 2.账号密 ...
C语言实现类似QQ聊天界面抖动功能
该博文为原创文章,未经博主同意不得转载,如同意转载请注明博文出处本文章博客地址:https://cplusplus.blog.csdn.net/article/details/104991863 实 ...
java基于ssm+vue+elementui楼盘房屋销售系统前后端分离
楼盘房屋是人类居住是必须的一个环境.且因为我国城镇化比例比较高,所以当前有很多的人希望到城市购买相关的楼盘和房屋.以更方便享受城市的教育和医疗资源.也能够让需要房屋销售相关信息的人更快的获取到更加全面 ...
基于vue+elementui+admin的axios封装
文章目录系列文章目录前言一.基于vue+elementui+admin对axios进行封装? 二.使用步骤 1.若项目需要进行字符防串改处理(项目需要而定) 2.创建crypto.js和encr ...

electron+vue+elementui实现类似QQ窗口靠边自动边缘隐藏，electron+vue桌面应用项目框架搭建