首先,我们需要创建一个基本的 Vite + Vue 3 + Electron 项目结构。假设你已经安装了 Node.js 和 npm,接下来我们将一步步创建项目。 1. 初始化项目 # 创建项目文件夹mkdirvite-vue3-electron-expresscdvite-vue3-electron-express# 初始化 npm 项目npm init -y# 安装 Vite 和 Vue 3npm install vue@next n...
虽然是vue3.x版本,但是大部分的代码还是采用了vue2.x的语法去编写,这样让没有学过vue3的同学们,看起来更直观一点 Electron是一个用于构建跨平台桌面应用程序的开源框架,由 GitHub 开发和维护。它允许开发者使用HTML、CSS和JavaScript等前端技术,结合 Node.js 和 Chromium,创建可以在Windows、macOS和Linux上运行的桌...
先用Vite创建一个Vue3的工程,这就是你的实际项目工程 接着安装几个Electron相关的依赖,最终我的工程下的依赖情况如下: 代码语言:javascript 代码运行次数:0 运行 AI代码解释 "@vue/compiler-sfc":"^3.0.0","vite":"^1.0.0-rc.9","vue":"^3.0.2","vue-router":"^4.0.0-rc.1","electron":"^11.0...
简介:Vue3 Vite electron 开发桌面程序 Electron是一个跨平台的桌面应用程序开发框架,它允许开发人员使用Web技术(如HTML、CSS和JavaScript)构建桌面应用程序,这些应用程序可以在Windows、macOS和Linux等操作系统上运行。 Electron的核心是Chromium浏览器内核和Node.js运行时环境。Chromium内核提供了现代浏览器的功能,例如HTML...
// https://vitejs.dev/config/ export default defineConfig({ base: "./", plugins: [vue()], }) 我们在终端中,执行npm run build命令。 就在根目录中生成了, dist 文件夹。 设置Electron 框架 有了Vue3 项目构建出来的 dist 目录之后, 设置Electron 就很简单了。
在Vue3、Vite和Electron的组合下开发桌面程序是一个相对复杂但功能强大的方案。以下是一个分步骤的指南,帮助你理解并构建这样的项目: 1. 创建Vue3+Vite项目 首先,你需要使用Vite来创建一个Vue3项目。可以通过以下命令完成: bash npm create vite@latest 在提示中输入项目名称,并选择Vue作为框架。这将生成一个基本...
vite5-electron31-admin:原创electron31+vue3 setup+pinia2+element-plus+echarts搭建客户端轻量级后台管理系统。提供4种通用布局模板,支持i18n国际化、动态路由权限,实现了表格、表单、图表、列表、编辑器等常用模块。 electronelectron-buildervitevue3element-pluselectron31-adminvite5+electron31后台electron31桌面端后台...
closeBundle我们electron打包是需要index.html 所以我们先等vite打完包之后vite会自动调用这个钩子 然后在这个钩子里面打包electron vite.config.ts import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import {viteElectronDev} from '....
在「vite.config.ts」中配置vite-plugin-electron插件入口 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import electron from 'vite-plugin-electron' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), electron({ // 主进程入口文件 entry:...
Electron、Vite和Vue3的结合,为我们提供了一个强大而灵活的解决方案,能够快速开发出美观、功能丰富的跨平台桌面应用。 一、Electron简介 Electron是一个使用Web技术(HTML, CSS, 和JavaScript)来创建跨平台桌面应用程序的框架。它结合了Chromium和Node.js,让开发者能够使用前端技术来编写应用界面,并通过Node.js访问底层...