Electron与vue实践初体验

Posted on

electron

00x0 写在前面

  最近接触了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