vue + Electron 制作桌面应用的示例代码

下面是关于“vue + Electron 制作桌面应用的示例代码”的完整攻略，主要分为以下几个步骤：

1. 创建项目

首先，确保已安装最新版本的 nodejs 和 npm。然后，在命令行工具中输入以下命令创建一个基础的 Vue.js 项目。

vue create my-desktop-app

接下来，进入项目目录并安装 Electron 和 electron-builder。

cd my-desktop-app
npm install --save-dev electron electron-builder

此时，我们得到的是一个基础的 Vue.js 项目，在下一步中我们将基于它来使用 Electron 来创建桌面应用。

2. 使用 Electron

在使用 Electron 前，我们需要在根目录下新建一个 main.js 文件用来配置 Electron 的主进程。在 main.js 中，我们可以通过 BrowserWindow 查找和操作主窗口，如下所示：

// 引入快捷键模块
const { app, BrowserWindow } = require('electron')

// 创建一个窗口变量
let win

// 当 Electron 加载完成后执行
app.on('ready', createWindow)

// 创建一个窗口的函数
function createWindow() {
  // 创建一个浏览器窗口
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 加载应用的 HTML 文件
  win.loadFile('dist/index.html');

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

  // 关闭窗口时触发
  win.on('closed', () => {
    // 销毁窗口变量
    win = null
  })
}

在这个示例中，我们创建了一个窗口，并且使用 win.loadFile() 方法加载了 Vue.js 项目的编译结果 dist/index.html。

接下来，我们需要在 package.json 中添加一个 build 命令：

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build && electron-builder",
  ...
}

这样，在项目根目录下运行以下命令，即可启动 Electron 调试模式：

npm run build
npm start

3. 集成安装程序

前两步是用来创建和调试桌面应用的，当我们需要把桌面应用打包成一个安装程序时，需要用到 electron-builder。electron-builder 是一个开源的打包工具，可以把 Electron 应用打包成 Windows、MacOS 和 Linux 等操作系统的安装文件。

通过 electron-builder，我们只需在 package.json 中添加以下配置即可在本地打包和测试安装程序：

"build": {
  "productName": "My Desktop App",
  "appId": "my.desktop.app",
  "directories": {
    "output": "dist_electron"
  },
  "dmg": {
    "contents": [
      {
        "x": 110,
        "y": 150
      },
      {
        "x": 240,
        "y": 150,
        "type": "link",
        "path": "/Applications"
      }
    ]
  },
  "win": {
    "target": [
      {
        "target": "nsis",
        "arch": [
          "x64"
        ]
      }
    ]
  },
  "linux": {
    "target": [
      {
        "target": "AppImage",
        "arch": [
          "x64"
        ]
      }
    ]
  }
}

在配置中，我们指定了打包的应用名、应用 ID 和输出文件夹等参数。此时，我们可以在命令行中运行以下命令制作安装程序：

npm run build

示例说明

示例1: 使用 Vue.js + Electron 开发一个简单的桌面计算器

这个示例是一个简单的桌面计算器，计算器主要使用了 Vue.js + Electron 构建。在该示例中，通过 vue create 创建 Vue.js 项目，然后通过 electron-builder 构建为一个可执行文件，具体的实现过程可以参考上述的步骤。

示例2: 使用 Vue.js + Electron + NeDB 开发一个文本编辑器

这个示例是一个基于 Vue.js + Electron + NeDB 的桌面文本编辑器，该示例支持在本地存储和访问文本文件。在该示例中，由于需要操作文件系统，我们需要在主进程中使用 Node.js 的 API，具体实现过程可以参考 NeDB 的官方文档和 Electron 官网中文件系统的 API 相关内容。同时，我们还需要在vue.config.js中添加如下配置：

module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        extraResources: [
          {
            from: 'src/apps',  //拷贝app中上传的文件至安装目录
            to: 'apps'
          }
        ],
        asar: false,        //不打包为受保护的asar文件
        "nsis": {    //配置nsis安装包
          "oneClick": false,  //一键式安装
          "allowElevation": true,   //允许请求提升。 如果为false，则用户必须使用已启动的管理员拖动程序
        }
      }
    }
  }
}

通过构建，我们得到了一个支持在本地存储和访问文本文件的桌面文本编辑器。