electron-vue 入门

安装和启动

# 安装 vue-cli和脚手架样板代码
npm install -g vue-cli
vue init simulatedgreg/electron-vue electronDemo

# 安装依赖并运行你的程序
cd electronDemo
npm install  # 或者yarn
npm run dev  # 或者yarn run dev

打包

打包文件在build目录下

(1)使用electron-packager打包

# 针对所有或各平台打包
all  ：npm run build
macOS：npm run build:darwin
mas  ：npm run build:mas
linux：npm run build:linux
win32：npm run build:win32
web  ：npm run build:web

# 清除build目录下的打包文件
npm run build:clean

(2)使用electron-builder打包

# 针对所有平台打包
npm run build
# 生成简单的可执行文件
npm run build:dir
# 生成可在浏览器运行的web应用
npm run build:web

# 清除build目录下的打包文件
npm run build:clean

开发出现的问题

在electron-vue中使用vuex，无法改变vuex状态
解决：在src/main/index.js主进程加上：import '../renderer/store';

设置跨域
解决：在在src/main/index.js主进程new BrowserWindow内加上
webPreferences: {
  webSecurity: false,
},

添加通知
new Notification('添加成功');

其他
vue中使用 `<webview>` 标签打开一个url
建立主窗口：new BrowserWindow
在父主(父)窗口中创建子窗口：new BrowserView 

main 进程和 web 进程的通信

/********** main ***********/
import { ipcMain } from 'electron'

// 接收web发送的信息
ipcMain.on('web-send-message-to-main', (event, arg) => {
  console.log(`mian-accept: ${arg}`);
  // 向web发送信息
  event.sender.send('main-send-message-to-web', 'main-to-web');
});

/********** web（.vue） ***********/
// import electron from 'electron';
// const { ipcRenderer } = electron;
import { ipcRenderer } from 'electron';

// 接收main发送的信息
ipcRenderer.on('main-send-message-to-web', (event, arg) => {
  console.log(`web-accept: ${arg}`);
});

// 向main发送信息
ipcRenderer.send('web-send-message-to-main', 'web-to-main');
// ipcRenderer.sendSync('web-send-message-to-main', 'web-to-main');

dialog 对话框

// 在main中引入
import { dialog } from 'electron';

// 在vue组件中引入
// eslint配置 'import/no-extraneous-dependencies': 0,
import electron from 'electron';
const { dialog } = electron.remote;

// 打开对话框
dialog.showOpenDialog([{
  title: '打开文件',
  message: '打卡打开打开',
  filters: [
    { name: 'Images', extensions: ['jpg', 'png', 'gif'] },
    { name: 'Movies', extensions: ['mkv', 'avi', 'mp4'] },
    { name: 'Custom File Type', extensions: ['as'] },
    { name: 'All Files', extensions: ['*'] },
  ],
  properties: {
    openFile: true,
    // ...
  },
}], (filePaths) => {
  console.log(filePaths);
});

// 保存对话框
dialog.showSaveDialog((filename) => {
  console.log(filename);
});

// 消息对话框
dialog.showMessageBox({
  title: '信息对话框',
  message: '北方有佳人，绝世而独立。',
  detail: '这是一首著名的诗',
  type: 'info', // "none", "info", "error", "question", "warning"
  buttons: ['确认', '取消'],
}, (resIndex) => {
  if (resIndex === 0) {
    console.log('点击了确认');
  } else if (resIndex === 1) {
    console.log('点击了取消');
  }
});

// 错误弹窗
dialog.showErrorBox('错误弹窗', '这是一个错误弹窗');