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

electron官网：/

安装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 runelectron: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.源码下载

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