Electron与vue实践初体验

electron

写在前面

  最近接触了electronjs,官方文档上描述介绍Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架,用于构建桌面应用。在开始构建electron或vue之前,默认已经安装了nodejs和git。npm镜像资源索取代理地址在国外,安装速度很慢,这里使用了淘宝提供的镜像cnpm来进行安装。

  使用下面的命令来安装cnpm。

1
npm install -g cnpm --registry=https://registry.npm.taobao.org//安装cnpm

00x1 构建electron
  • 首先,打开命令行,使用cnpm安装electron。
    1
    2
    cnpm install -g electron//在全局安装
    cnpm install --save-dev electron//在当前目录安装

  这里使用了全局安装方式:
mockjs

  • 打开git,在github上下载electron-quick-start。
    1
    2
    3
    4
    git clone https://github.com/electron/electron-quick-start
    cd electron-quick-start
    cnpm install //安装各种依赖
    cnpm run start //打开桌面应用

  可以看到一个桌面应用被打开。
mockjs

00x2 在electron中引入vue
  • 新建一个vue项目

    1
    2
    3
    4
    5
    cnpm install -g vue-cli//全局安装vue-cli脚手架
    vue init webpack my-vue(项目名字)//初始化一个项目
    cd my-vue
    cnpm install //安装各种依赖
    npm run dev //打开这个项目
  • vue打包
      打开vue项目中config文件夹下的index.js文件,确认其中的assetsPublicPath修改为相对路径 ./。注意是build配置下的assetsPublicPath。

  运行npm run build对vue项目进行打包,在dist文件夹中生成打包文件。将dist文件夹中生成的static文件夹和index.html放入electron-quick-start下,替换掉electron-quick-start的index.html。

1
npm run build

  再次在electron-quick-start目录中运行npm run start

00x3 打包
  • 在electron-quick-start下安装打包插件

    1
    cnpm install -g electron-packager//采用全局安装
  • 使用electron-packager来进行打包,可以直接使用打包命令

electron-packager

  这里的参数:

  • location of project:项目所在路径
  • name of project:打包的项目名字
  • platform:确定了你要构建哪个平台的应用(Windows、Mac 还是 Linux)
  • architecture:决定了使用 x86 还是 x64 还是两个架构都用
  • electron version:electron 的版本
  • optional options:可选选项

  但是这个命令很长,每次都这样输入会比较麻烦;

  • 可以在package.json下的script下这样写

    1
    "electron_build": "electron-packager ./ --platform=win32 --arch=x64 --icon=./app/img/electron.ico --overwrite"
  • 打包

    1
    npm run electron_build

  运行打包命令就会生成一个文件夹,在里面就能找到打包生成的.exe文件。双击就能运行

Miss Me wechat
light