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

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.源码下载

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