electron+vite+vue3 快速入门实例教程
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 keep-alive及实践总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
vue3+element plus中利用el-menu如何实现路由跳转
这篇文章主要给大家介绍了关于vue3+element plus中利用el-menu如何实现路由跳转的相关资料,在Vue Router中我们可以使用el-menu组件来实现菜单导航,通过点击菜单项来跳转到不同的路由页面,需要的朋友可以参考下2023-12-12
本文主要介绍了element中el-table与el-form同用并校验，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要介绍了vue实现点击导航栏滚动页面到指定位置的功能(推荐),步骤一是是通过获取不同板块的滚轮高度,步骤二通过编写执行滚动操作的函数,结合实例代码给大家介绍的非常详细,需要的朋友可以参考下2023-11-11
这篇文章主要为大家介绍了vue2 d3实现企查查股权穿透图股权结构图效果详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要介绍了vue弹窗组件的实现示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue的事件响应式进度条组件的实例代码，非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-02-02
vue-cli创建项目ERROR in Conflict: Multiple assets emit dif
最近vue/cli创建项目后出现了错误,下面这篇文章主要给大家介绍了关于vue-cli创建项目ERROR in Conflict: Multiple assets emit different content to the same filename index.html问题的解决办法,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了如何在项目中使用JSON动画组件,包括创建目录结构、下载JSON文件、编写自定义组件代码以及组件的使用方法,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-01-01
今天小编就为大家分享一篇在vue中更换字体,本地存储字体非引用在线字体库的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论