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打包