详解如何使用vue和electron开发一个桌面应用

以下是详解如何使用vue和electron开发一个桌面应用的完整攻略：

1. 准备工作

首先需要安装Node.js和npm，然后使用npm安装vue-cli和electron：

npm install -g vue-cli
npm install -g electron

2. 创建一个基础的Vue项目

在命令行输入vue init webpack my-electron-app，创建一个基于Webpack的Vue项目my-electron-app，并按照提示输入项目信息。

3. 修改项目的配置文件

修改package.json文件，添加electron的启动参数，如下所示：

{
  "scripts": {
    "dev": "npm run start",
    "start": "electron .",
    "build": "webpack"
  }
}

4. 安装必备依赖

在命令行中进入到my-electron-app目录下，使用以下命令安装必备的依赖：

npm install electron --save-dev
npm install electron-packager --save-dev
npm install electron-builder --save-dev

5. 创建main.js

在项目根目录下创建一个新的JavaScript文件main.js，用于配置electron的主进程。

示例代码：

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

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }));

  mainWindow.on('closed', () => {
    mainWindow = null;
  });
});

6. 修改webpack配置文件

修改webpack.config.js文件，添加以下配置，使其可以打包electron所需的JavaScript代码。请注意，这是对开发和构建过程中的Webpack配置的新的需求，应当予以专门关注。

const path = require('path');

module.exports = {
  // ...
  target: 'electron-renderer',
  node: {
    __dirname: false,
    __filename: false
  }
  // ...
};

7. 在渲染进程中使用Vue

在Vue项目中，我们通常把所有的Vue代码写在src文件夹中。我们需要在main.js中引入Vue并正确地设置其运行环境。

示例代码：

const { app, BrowserWindow } = require('electron');
const path = require('path');
const url = require('url');
const Vue = require('vue');

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  const rendererUrl = url.format({
    pathname: path.join(__dirname, 'dist', 'index.html'),
    protocol: 'file:',
    slashes: true
  })

  mainWindow.loadURL(rendererUrl);

  mainWindow.on('closed', () => {
    mainWindow = null;
  });
});

Vue.prototype.$electron = electron;
new Vue({
  render: h => h(App)
}).$mount('#app');

8. 打包应用

在这个阶段，你已经完成了“开发”阶段的任务。接下来，我们需要使用electron-packager和electron-builder来打包应用。这些工具可以将您的应用程序压缩为适用于Windows，Mac和Linux的可执行文件。

您需要在package.json文件中的scripts属性中添加以下npm命令：

{
  "scripts": {
    "dev": "npm run start",
    "start": "electron .",
    "pack": "electron-packager . MyApp --platform=all --arch=all --out=out",
    "build:win": "electron-builder --win",
    "build:osx": "electron-builder --mac",
    "build:linux": "electron-builder --linux",
    "build": "npm run build:win && npm run build:osx && npm run build:linux"
  }
}

最后一条build命令将打包应用程序，分别运行build:win，build:osx和build:linux。

示例代码：

npm run pack
npm run build

经过以上步骤，您将得到适用于Windows，Mac和Linux的可执行文件。

参考示例：

• electron-vue
• vue-cli-plugin-electron-builder

希望本文对您有所帮助。