Electron 简介

  • 跨平台技术：做桌面应用 Electorn / NW.js
  • Electorn 本质上是 Node.js + 谷歌浏览器的内核，所以它可支持election代码逻辑，还可以渲染Web页面。
  • 桌面应用技术栈：Electorn是壳子，在这个壳子里面可以使用任意的web前端技术（jQuery/Vue/React/Angular）
  • 虽然Electron中有浏览器的内核，但没有CORS同源策略，所以在electron开发中，可以直接调接口。

搭建Electron环境

mkdir electron-app
cd electron-app
npm init
cnpm i electron -g
cnpm i electron -S
  • mian.js 是electron的主线程，一般用于创建窗口。。。
  • preload.js 是electron的渲染线程。。。
  • 运行桌面应用：electron .

手动搭建Vue(装饰器)环境

cnpm i webpack -D
cnpm i webpack-dev-server -D
cnpm i @babel/coo......
cnpm i vue-loader babel-load.....
cnpm i html-webpack-plugin ....

cnpm i vue vue-router vuex -S
cnpm i vue-property-decorator vuex-class -S
  • webpack.config.js 中配置入口、出口、loaders、plugins。。。
  • babel.config.js 对babel进行若干配置，还要支持装饰器语法。。。
  • vue装饰器编程范式，参考 src 目录。

环境运行

  • 在election中区分开发和生产环境，使用到了electron-is-dev
  • 运行项目时希望先启动vue本地服务，再启动桌面应用，使用到了concurrently

Electorn打包