vue-cli-electron

简介

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');
  }
}

package.json

  "main": "background.js",
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "electron": "^13.6.9",
    "electron-devtools-installer": "^3.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "lint-staged": "^11.1.2",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "vue-cli-plugin-electron-builder": "~2.1.1",
    "vue-template-compiler": "^2.6.14"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  }