从Vite+Vue3+Electron构建桌面应用模板

简介：本文将带你了解如何使用Vite、Vue 3和Electron创建一个完整的桌面应用模板。我们将探索每个技术的核心概念，并展示如何将它们结合在一起，构建一个功能齐全的桌面应用。通过这个模板，你可以快速搭建自己的桌面应用，并在此基础上进行定制和扩展。

在当今的Web开发领域，Vite、Vue 3和Electron是三个非常流行的技术。它们各自都有独特的优势，结合在一起可以创造出强大的桌面应用。下面我们将分步介绍如何使用这些技术来创建一个桌面应用模板。

一、技术选型

Vite：Vite是一个由尤雨溪（Vue.js的创造者）开发的现代化前端构建工具，旨在提供快速的开发启动和热模块替换（HMR）。它使用了原生ESM，通过Rollup进行打包，使得构建速度快、体积小。
Vue 3：Vue 3是Vue.js的最新版本，提供了更强大的功能和性能。Vue 3采用了Composition API，使得组件开发更加灵活和可维护。
Electron：Electron是一个使用Chromium和Node.js构建跨平台桌面应用的框架。它允许开发者使用Web技术（HTML、CSS和JavaScript）来构建桌面应用，并提供了与操作系统交互的能力。

二、创建桌面应用模板

安装依赖
首先，我们需要安装Vite、Vue 3和Electron的相关依赖。在项目根目录下打开终端，执行以下命令：

npm init @vitejs/app my-electron-vue-app --template vue
cd my-electron-vue-app
npm install electron --save

上述命令将创建一个新的Vue项目，并安装Electron作为依赖项。

配置Vite
在项目根目录下找到vite.config.js文件，添加以下配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '/@': path.resolve(__dirname, './src')
    }
  }
})

该配置将/@路径指向项目的src目录，以便在开发时能正确找到相关资源。

创建Electron主进程文件
在项目根目录下创建一个名为main.js的文件，这是Electron应用的入口点。在该文件中，我们需要加载Vue应用并设置主窗口。示例代码如下：

const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')
const { createApp } = require('./src/app') // 引入Vue应用实例化函数
function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true, // 允许使用Node.js API
      contextIsolation: false, // 禁用上下文隔离以提高性能和兼容性（仅供开发环境使用）
      enableRemoteModule: true // 启用远程模块以支持Electron的功能（仅供开发环境使用）
    }
  })
  mainWindow.loadURL(url.format({ pathname: path.join(__dirname, '/dist/index.html') })) // 加载Vue应用的入口文件
}
  // Electron会在初始化后并准备显示主窗口时调用这个函数。有些初始化工作例如网络请求等可以放在这里。
  app.whenReady().then(() => { createWindow() })
  // 当全部窗口关闭时退出应用
  app.on('window-all-closed', () => { app.quit() })

从Vite+Vue3+Electron构建桌面应用模板

最热文章