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

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

Logo

前往低代码交流专区

更多推荐