electron-vue 框架搭建

1. 安装环境

安装 nodejs

2. 方案一

在拟创建项目的目录下执行如下命令

vue init simulatedgreg/electron-vue vrvcloud

注意点：

执行该命令可能要求安装 vue/cli

该方法创建的 vue 项目已经整合了 electron

3. 方案二

1. 在拟创建项目的目录下执行如下命令

vue create vrvcloud

2. 将 src 目录下的文件拷贝到 src\renderer 下

3. 新建 src\main 文件夹，用来存放 electron 主进程文件

4. 修改配置文件
在项目根目录下创建 vue.config.js 文件，并写入如下，参考连接：https://cli.vuejs.org/zh/config/#vue-config-js

全局配置的导出
vue inspect > output.js

module.exports = {
    pages: {
      index: {
        // page 的入口
        entry: 'src/renderer/main.js',
      }
    }
}

5. 修改 package.json

scripts 区段之上加入如下内容，和 name 平级

"main": "./dist/electron/main.js",

scripts 区段加入如下内容
"compile": "electron-webpack",
"dev": "yarn compile && electron-webpack dev",
"dist": "yarn compile && electron-builder",　　// 执行该命令后在 dist 目录下会生成安装包

6. 在 src\main 文件夹新建文件 main.js 内容如下

/*
 * @Author: liyubo
 * @Date: 2020-05-15 14:29:51
 * @LastEditors: liyubo
 * @LastEditTime: 2020-05-15 14:38:48
 * @Description: 
 */ 
const { app, Menu, Tray , BrowserWindow} = require('electron')

const path = require('path')

function fopenwindow () {
  console.log('mount')

}

function flogout () {
console.log('unmount')
}

// 加载托盘
let tray  = null
app.on('ready', () => {
    console.log('__dirname:::', __dirname)
    tray  = new Tray(path.resolve(__dirname, '../renderer/assets/logo.png'))
    const contextMenu = Menu.buildFromTemplate([
        { click: fopenwindow, label: '打开', type: 'normal' },
        { click: flogout, label: '注销', type: 'normal' },
        { role: 'quit', label: '退出', type: 'normal' },
        //{ role: 'toggleDevTools', label: '调试', type: 'checkbox' }
  ])

  tray .setToolTip('中共中央组织部电子文档安全管理系统')
  // 默认选中的项
  contextMenu.items[0].checked = false

  // Call this again for Linux because we modified the context menu
  tray.setContextMenu(contextMenu)
})

// 加载登录对话框

// 保持对window对象的全局引用，如果不这么做的话，当JavaScript对象被
// 垃圾回收的时候，window对象将会自动的关闭
let loginwin

const winURL = process.env.NODE_ENV === 'development' ?
    `http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}` :
    `file://${__dirname}/index.html`

function createWindow () {
  // 创建浏览器窗口。
  loginwin = new BrowserWindow({
    width: 1150,
    height: 700,
    frame: false,
    webPreferences: {
      nodeIntegration: true, // electron 5.0 以上斑斑默认不支持nodejs
      experimentalFeatures: true,
      webSecurity: false,
      webviewTag: true,
      contextIsolation: false,
    }
  })

  // 加载index.html文件
  // loginwin.loadFile(path.resolve(__dirname, '../renderer/login.html'))
  loginwin.loadURL(winURL)

    // 打开开发者工具
   loginwin.webContents.openDevTools()

  // 当 window 被关闭，这个事件会被触发。
  loginwin.on('closed', () => {
    // 取消引用 window 对象，如果你的应用支持多窗口的话，
    // 通常会把多个 window 对象存放在一个数组里面，
    // 与此同时，你应该删除相应的元素。
    loginwin = null
  })
}

// Electron 会在初始化后并准备
// 创建浏览器窗口时，调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow)

// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
  // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
  // 否则绝大部分应用及其菜单栏会保持激活。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // 在macOS上，当单击dock图标并且没有其他窗口打开时，
  // 通常在应用程序中重新创建一个窗口。
  if (loginwin === null) {
    createWindow()
  }
})

7. 安装相关组件
yarn add [email protected] --dev
npm install electron-webpack --save-dev // 安装后即可执行命令启动 yarn dev，如果需要打包则需要安装如下组件，打包后有可能出现资源找不到的情况，复制资源到对应路径即可
yarn add electron-builder --dev
yarn add source-map-support

8. 相关知识

yarn 介绍

https://www.jianshu.com/p/3b74aee8e77a

------------------------------------------