electron+vite+vue3 快速入门实例教程
作者：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 入门内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！