vue基于electron构建第一个程序

下面详细讲解基于Vue和Electron构建第一个程序的攻略。

简介

Vue是一款流行的JavaScript框架，它可以用于构建单页面应用程序（SPA）和复杂的Web应用程序。Electron是由GitHub开发的跨平台桌面应用程序框架，可以使用JavaScript、HTML和CSS构建桌面应用程序。在Vue和Electron的结合中，我们可以构建出一个Web应用程序，并将它打包成一个桌面程序，这将有助于增强应用程序的可用性和易用性。

下面是基于Vue和Electron构建桌面应用程序的攻略：

步骤

步骤1：安装Electron和Vue

首先，我们需要安装Electron和Vue。使用以下命令安装它们：

# 安装Electron（需要先安装npm）
npm install electron --save-dev

# 安装Vue
npm install vue --save

步骤2：创建Vue应用程序

使用Vue CLI创建一个新的Vue应用程序，使用以下命令：

vue create myapp

其中，myapp是你的应用程序名称。

步骤3：配置Vue应用程序

进入myapp目录，编辑/package.json文件并添加以下内容：

{
  "name": "myapp",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "electron": "electron ."
  },
  "dependencies": {
    "electron": "^10.1.1",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.3.0",
    "@vue/cli-plugin-eslint": "~4.3.0",
    "@vue/cli-service": "~4.3.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  }
}

注意，需要将main设置为main.js。

接下来，创建一个名为main.js的文件，添加下面的代码：

const { app, BrowserWindow } = require("electron");
const path = require("path");
const url = require("url");

let win;

function createWindow() {
  // 创建浏览器窗口
  win = new BrowserWindow({ width: 800, height: 600 });

  // 加载应用的index.html
  win.loadURL(
    url.format({
      pathname: path.join(__dirname, "dist/index.html"),
      protocol: "file:",
      slashes: true
    })
  );

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

  // 窗口关闭时触发的事件
  win.on("closed", () => {
    win = null;
  });
}

// 应用启动时触发的事件
app.on("ready", createWindow);

// 所有窗口都关闭时触发的事件
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

// 应用程序激活时触发的事件
app.on("activate", () => {
  if (win === null) {
    createWindow();
  }
});

这段代码是Electron的主进程，它创建了一个新的BrowserWindow并加载Vue应用程序的dist/index.html文件。当主窗口关闭时，它将设置为null，并在应用程序退出时自动销毁。

步骤4：运行Vue应用程序

使用以下命令运行Vue应用程序：

npm run serve

这将启动Vue开发服务器并自动在浏览器中打开Vue应用程序。

步骤5：使用Electron构建应用程序

使用以下命令打包Vue应用程序：

npm run build

这将在myapp/dist目录中生成编译后的Vue应用程序代码。

编辑main.js文件，将以下代码行的目录名更改为你的Vue应用程序的dist目录位置（默认为myapp/dist）：

win.loadURL(
  url.format({
    pathname: path.join(__dirname, "myapp/dist/index.html"),
    protocol: "file:",
    slashes: true
  })
);

使用以下命令启动Electron应用程序：

npm run electron

如果一切顺利，你应该能够在桌面上的Electron应用程序中看到你的Vue应用程序。

示例1：添加一个新的窗口

编辑main.js文件，添加以下代码：

// 添加创建新窗口的功能
function createNewWindow() {
  let newWin = new BrowserWindow({ width: 600, height: 400 });
  newWin.loadURL(
    url.format({
      pathname: path.join(__dirname, "myapp/dist/new.html"),
      protocol: "file:",
      slashes: true
    })
  );
  newWin.on("closed", () => {
    newWin = null;
  });
}

// 在应用程序准备就绪后，添加一个打开新窗口按钮
app.on("ready", () => {
  createWindow();
  const mainMenu = Menu.buildFromTemplate([
    {
      label: "File",
      submenu: [
        {
          label: "New Window",
          click() {
            createNewWindow();
          }
        }
      ]
    }
  ]);
  Menu.setApplicationMenu(mainMenu);
});

这将创建一个新的BrowserWindow，加载myapp/dist/new.html文件，并在主菜单中添加一个新窗口按钮。

示例2：与Electron原生API交互

编辑Math.vue文件，添加以下代码：

<template>
  <div>
    <h1>Math Calculator</h1>
    <form>
      <label>
        Number 1:
        <input type="number" v-model="num1" />
      </label>
      <br />
      <label>
        Number 2:
        <input type="number" v-model="num2" />
      </label>
      <br />
      <button @click.prevent="sum()">Sum</button>
      <button @click.prevent="product()">Product</button>
    </form>
    <br />
    <p>Result: {{ result }}</p>
  </div>
</template>

<script>
const { ipcRenderer } = require("electron");

export default {
  data() {
    return {
      num1: "",
      num2: "",
      result: ""
    };
  },

  methods: {
    sum() {
      ipcRenderer.send("math-sum", [this.num1, this.num2]);
    },
    product() {
      ipcRenderer.send("math-product", [this.num1, this.num2]);
    }
  },

  created() {
    ipcRenderer.on("math-sum-result", (event, result) => {
      this.result = result;
    });

    ipcRenderer.on("math-product-result", (event, result) => {
      this.result = result;
    });
  }
};
</script>

这将使用Electron的ipcRenderer模块，与Electron主进程通信，实现简单的计算器应用程序。在app.on("ready")事件中，添加以下代码：

const { ipcMain } = require("electron");

ipcMain.on("math-sum", (event, args) => {
  const sum = args[0] + args[1];
  event.sender.send("math-sum-result", sum);
});

ipcMain.on("math-product", (event, args) => {
  const product = args[0] * args[1];
  event.sender.send("math-product-result", product);
});

这将注册两个ipcMain事件监听器，用于响应来自Math.vue组件的求和和乘积计算请求，并将计算的结果返回给组件。

这两个示例都演示了如何在Electron和Vue之间构建交互式应用程序。

希望这些步骤和示例能够帮助你构建自己的基于Vue和Electron的桌面应用程序。