electron+vite+vue3 快速入门实例教程

更新时间：2025年05月07日 11:57:10 作者：2501_91537388

Electron、Vite 和 Vue 3 结合使用可以创建强大的跨平台桌面应用程序,下面是一个快速入门教程,帮助你搭建一个基于 Electron + Vite + Vue 3 的项目,感兴趣的朋友一起看看吧

环境准备

Node.js: 首先确保你的机器上已经安装了 Node.js。你可以通过以下命令来检查是否已安装：

node -v
npm -v

创建项目目录:
创建一个新的文件夹并初始化一个 Node.js 项目。

mkdir my-electron-vue-app
cd my-electron-vue-app
npm init -y

安装依赖

安装 Electron:
使用 npm 安装 Electron。注意，我们需要全局安装 Electron CLI 工具。

npm install electron --save-dev
npm install @electron-forge/cli --global
npx electron-forge import

创建 Vite 配置:
使用 Vite 作为项目构建工具。首先安装 Vite 和 Vue 相关依赖。

npm install vite vue@next vue-router@next vuex@next --save-dev

配置 Vite:
在项目根目录下创建一个 vite.config.js 文件，用于配置 Vite：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      input: 'index.html'
    }
  },
  resolve: {
    alias: {
      '@': '/src'
    }
  }
});

创建项目结构

创建基本目录结构:

mkdir -p src
touch index.html main.js package.json vite.config.js

编辑 index.html:
为 Vite 和 Vue 配置一个简单的 HTML 文件。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Electron + Vite + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

编辑 main.js:
创建一个基本的 Vue 应用。

import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.mount('#app');

创建 src/App.vue:
创建一个简单的 Vue 组件。

<template>
  <div id="app">
    <h1>Hello, Electron + Vite + Vue!</h1>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>

配置 Electron

编辑 main.js:
创建一个基本的 Electron 应用。在项目根目录下创建一个 electron-main.js 文件：

const { app, BrowserWindow } = require('electron');
const path = require('path');
function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  });
  win.loadFile('index.html');
}
app.whenReady().then(() => {
  createWindow();
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

编辑 package.json:
添加一些必要的配置和脚本。

{
  "name": "my-electron-vue-app",
  "version": "1.0.0",
  "main": "electron-main.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "start": "electron ."
  },
  "dependencies": {
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "electron": "^14.0.0",
    "@vitejs/plugin-vue": "^2.0.0",
    "vite": "^2.6.4"
  }
}

运行项目

开发模式:
使用 Vite 启动开发服务器。

npm run dev

打包和运行 Electron 应用:
打包并启动应用。

npm run buildnpm start

总结

以上步骤介绍了如何使用 Electron、Vite 和 Vue 3 创建一个简单的桌面应用程序。通过这些步骤，你可以搭建起一个基础的开发环境，并且可以在此基础上进一步扩展和定制你的应用。

希望这个快速入门教程对你有所帮助！如果你有任何问题或需要更多细节，请随时提问。

到此这篇关于electron+vite+vue3 快速入门实例教程的文章就介绍到这了,更多相关electron vite vue3 入门内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

解决vue刷新页面以后丢失store的数据问题
这篇文章主要介绍了解决vue刷新页面以后丢失store的数据问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
Vue项目打包部署到iis服务器的配置方法
这篇文章主要介绍了Vue项目打包部署到iis服务器的配置方法，文中通过代码示例给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-10-10
vue+elementUI实现表单和图片上传及验证功能示例
这篇文章主要介绍了vue+elementUI实现表单和图片上传及验证功能,结合实例形式分析了vue+elementUI表单相关操作技巧,需要的朋友可以参考下
2019-05-05
vue-cropper插件实现图片截取上传组件封装
这篇文章主要为大家详细介绍了vue-cropper插件实现图片截取上传组件封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-05-05
vue3下watch的使用方法示例
vue3中的watch是一个组合式的API使用时需要引入,下面这篇文章主要给大家介绍了关于vue3下watch使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-03-03
vue3-组合式api-provide/inject详解
provide/inject 适用于跨级通信，在孙组件中通过依赖注入的方式能获取到父组件中改变的这个值，下面通过实例代码介绍vue3-组合式api-provide/inject的相关知识,需要的朋友可以参考下
2022-11-11
详解Vue如何使用xlsx库导出Excel文件
第三方库xlsx提供了强大的功能来处理Excel文件,它可以简化导出Excel文件这个过程,本文将为大家详细介绍一下它的具体使用,需要的小伙伴可以了解下
2025-01-01
浅谈Vue服务端渲染框架Nuxt的那些事
这篇文章主要介绍了浅谈Vue服务端渲染框架Nuxt的那些事，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
Vue2.x Todo之自定义指令实现自动聚焦的方法
我们希望用户双击 todo 进入编辑状态后输入框自动获取焦点，而不是需要先手动点一下。这篇文章主要介绍了Vue 2.x Todo之自定义指令实现自动聚焦,非常具有实用价值，需要的朋友可以参考下
2019-01-01
vue中下拉框组件的封装方式
这篇文章主要介绍了vue中下拉框组件的封装方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01