Electron-vue (持续更新)

 阅读约 3 分钟

简介

  • 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
1573177265673.jpg
然后安装依赖

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文件里的图标更换,注意文件后缀名必须一致

很好玩的一个程序,持新

阅读 183发布于 11月8日
推荐阅读
目录