electron-vue 从项目搭建到开发完成

node环境 V12.19.0

通过electron-vue开发了一个完整项目（数据存储，tab切换，软件更新，添加菜单），记录一下用到的技术点

本项目从开发到发布到更新

1.项目搭建

npm install vue-cli -g

vue create your-project

vue add vue-cli-plugin-electron-builder

npm run electron:serve

 2.数据存储(主要存储系统的设置变量和登录用户的用户名)

const Store = window.require('electron-store');
const electronStore = new Store();

const {remote} =  window.require('electron');
const {app} = remote;
const appPath = app.getAppPath();

// electronStore.delete("userData");

const defaultSystemConfig = {
	saveDir:appPath,
	msgAudio:true,
	deskNotice:true,
	MsgDetail:false,
	unreadMsgNum:true,
	italkinIcon:true,
	softUpdateConfig:false
}
const systemConfig = electronStore.get('systemConfig')||defaultSystemConfig

const userData = electronStore.get("userData")||[];

3.tab切换，webview加载数据

 const TabGroup = require("electron-tabs");
  this.tabGroup = new TabGroup({});
 this.tabGroup.on("tab-active", (tab, tabGroup) => {
          _this.currentTabTitle = tab.title;
      });
  let tab = this.chatTab = this.tabGroup.addTab({
      title: "聊天",
      src: pageUrl + "#/chat",
      closable: false,
      badge: 0,
      icon: "iconfont icon-icon_leftbar_message",
      webviewAttributes: {
                        nodeintegration: true,
                        id: "chat_webview"
                    }
      });

4.添加右键菜单

const contextMenu = window.require('electron-context-menu');
   addContextMenu(webview) {
                let _this = this;
                contextMenu({
                    window: webview,
                    labels: {
                        cut: '剪切',
                        copy: '复制',
                        paste: '粘贴',