简介

vue-cli-electron是 vue2 基于vue-cli3&4的版本

环境

一个简单的表格是这么创建的：

开发环境	版本
node版本	>=14.0.0 推荐v16
Electron版本	^13.0.0
vue版本	^2.0x
vue-cli	v3和v4

安装依赖

https://npmmirror.com/mirrors/node/v16.14.2/node-v16.14.2-x64.msi
npm install -g @vue/cli
npm install -g yarn
yarn add vue-cli-plugin-electron-builder -D

执行

vue create vue-electron-pro
cd  vue-electron-pro

npm install

vue add electron-builder
yarn electron:serve

关闭工具栏

import { app, protocol, BrowserWindow, Menu } from "electron";

async function createWindow() {
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
    icon: `@/assets/imgs/favicon.ico`,
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
    },
  });
  Menu.setApplicationMenu(null); //关闭工具栏
  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
    // if (!process.env.IS_TEST) win.webContents.openDevTools() //关闭f12打印日志
  } else {
    createProtocol("app");
    // Load the index.html when not in development
    win.loadURL('app://./index.html');
  }
}