vue实现桌面功能

Vue 实现桌面功能的方法

Vue.js 可以通过结合 Electron 或 NW.js 等框架实现桌面应用开发。以下是几种常见的方法：

使用 Vue 与 Electron 结合

Electron 是一个流行的框架，允许使用 Web 技术（HTML、CSS、JavaScript）开发跨平台桌面应用。Vue 可以与 Electron 无缝集成。

安装 Electron 和 Vue CLI：

npm install -g @vue/cli
vue create my-desktop-app
cd my-desktop-app
npm install electron --save-dev

创建 Electron 主进程文件（background.js）：

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

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadURL('http://localhost:8080') // 开发环境
  // 生产环境使用 win.loadFile('dist/index.html')
}

app.whenReady().then(createWindow)

修改 package.json，添加 Electron 启动脚本：

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

使用 Vue 与 NW.js 结合

NW.js（原名 Node-Webkit）是另一个支持 Web 技术开发桌面应用的框架。

安装 NW.js：

npm install nw --save-dev
npm install nw-vue-cli --save-dev

配置 NW.js 的 package.json：

{
  "name": "vue-nw-app",
  "main": "http://localhost:8080",
  "window": {
    "width": 800,
    "height": 600
  }
}

启动开发服务器：

vue-cli-service serve
nw .

使用 Quasar Framework

Quasar 是一个基于 Vue 的框架，支持构建桌面应用（通过 Electron）、移动应用和 PWA。

安装 Quasar CLI：

npm install -g @quasar/cli
quasar create my-desktop-app

添加 Electron 模式：

cd my-desktop-app
quasar mode add electron

启动开发服务器：

quasar dev -m electron

打包与分发

使用 Electron Builder 打包应用：

npm install electron-builder --save-dev

配置 electron-builder.json：

{
  "appId": "com.example.myapp",
  "win": {
    "target": "nsis"
  },
  "mac": {
    "target": "dmg"
  },
  "linux": {
    "target": "AppImage"
  }
}

运行打包命令：

npm run electron:build

注意事项

• 在 Electron 中，主进程和渲染进程需要分开处理。主进程使用 Node.js API，渲染进程运行 Vue 应用。
• 如果需要使用 Node.js 模块，确保在 Vue 项目中正确配置 vue.config.js：

  module.exports = {
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true
    }
  }
  }

• 生产环境下，需要将 Vue 应用构建为静态文件，然后由 Electron 加载。