electron-vue 介绍以及基础使用

 

Electron是一个基于node.js的跨平台桌面应用

它最大的有点在于可以使用JavaScript 和 HTML来构建跨平台的桌面应用。

我们常见的文本编辑器 atom，vscode就是基于Electron开发的。

---

electron-vue使用前需要一定的vue和vue-cli使用基础

安装生成项目:

最好不要选择eslint。

npm install -g vue-cli
vue init simulatedgreg/electron-vue projectname

 目录结构:

 

dist文件夹不用管。

static文件存放静态文件

build文件里有一个icons存放图标的文件。里面默认有三个系统(mac,linux,windows)用的图标, 更换自己的图标时需要参考原来的大小。windows是ico后缀

main是文件是主线程

renderer是渲染线程,里面的结构就是正常的vue操作。

index.ejs就是vue-cli的index.html

npm run dev  运行

npm run build 打包成exe项目   或者 把npm换成yarn

 主线程的参数以及优化体验(main/index.js)

mainWindow = new BrowserWindow({   //创建窗口实例
    height: 670,   //高
    useContentSize: true,
    width: 1020, //宽
    frame:false,  //是否添加边框;默认为true
    minWidth:1020,  //宽最小值
    minHeight:670, //高最小值
    show:false  //隐藏页面; 默认为true
  })

mainWindow.on('ready-to-show',() => {  //监听加载完后再展示窗口
    mainWindow.show()  
  })