electron+vue+elementui实现类似QQ窗口靠边自动边缘隐藏,electron+vue桌面应用项目框架搭建
electron+vue+elementui实现类似QQ窗口靠边自动边缘隐藏,electron+vue桌面应用项目框架搭建
·
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.源码下载
有遇到问题请留言或私聊!!!
更多推荐
已为社区贡献16条内容
所有评论(0)