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.源码下载
有遇到问题请留言或私聊!!!