乐趣区

Electronvue-持续更新

简介

  • Electron 可将网页打包成一个可安装的桌面程序,虽然使用 electron-vue 很方便,但是还是要了解一下 electron 官网地址:https://electronjs.org/
  • electron-vue 利用了 vue-cli 脚手架,并且拥有 vue 的很多插件,成为我使用 electron 的首选,非常方便快捷,基本可以根据官网搭建项目,官网地址 https://simulatedgreg.gitbooks.io/electron-vue/content/cn/

Electron-vue 使用

首先,我们在安装了 node.js 和 Vue 的基础上搭建脚手架并新建项目

npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project

在创建项目过程中,我们可以进行下面这些选择,比如可以选择不用 eslint

然后安装依赖

cd my-project
yarn # or npm install

建议大家使用 yarn , 以免发生不必要的错误。使用 npm,后期会有打包不成功,打包过程报错,缺少依赖等现象(尤其是 window 系统)

经过一番漫长的等待,可以最后运行程序了

yarn run dev # 或者 npm run dev

运行后

然后我们就可以开始编写我们的桌面程序了
编写完成后,将项目打包,打包生成的程序系统是根据打包的电脑来决定的,比如 64 位系统打包的程序 32 位的是不能用的

npm install electron-builder

npm install electron-package

自动更新功能
给程序添加自动更新,需要在 package.json 里配置

 "publish": [
      {
        "provider": "generic",
        "url": "http:// 下载地址"
      }
    ]

配置完后,会出来一个 latest.yml 文件,我们需要将更新后的.exe 程序与 latest.yml 文件放到服务器下面,latest 里面会有版本号,检测时候,会检测 latest 里的版本号与现在运行的版本号是否一致,一致的跳过,不一致会进行更新
由于 mac 的签名机制,npm run build 需要签名才能打包成功
另外,electron 好多东西都是可以更改,比如打包后的程序图标,可以将 build 的 icons 文件里的图标更换,注意文件后缀名必须一致

很好玩的一个程序,持新

退出移动版