所以我们需要修改vite.config.ts配置文件,以此将electron和vite项目结合起来。 代码如下: import { defineConfig } from "vite";import vue from "@vitejs/plugin-vue";import * as path from "path";import electron from "vite-plugin-electron";import electronRenderer from "vite-plugin-electron/renderer";im...
我们需要先借助Vite初始化一个Vue3+TS 的项目,后面我们在逐步添加electron,在任何一个文件夹下: 执行命令: npm create vite@latest my-vue-app -- --template vue-ts 安装依赖: npm install 运行项目: npm run dev 这样一个最简单的Vue3 + TS + Vite的前端项目就初始化好了。 2.安装Electron相关包 初始...
【win&mac】30分钟学会Vite创建和打包Electron+Vue3,前端跨平台桌面应用零基础入门教程【2024新版ESM规范】共计6条视频,包括:1.基于 Vite 创建 Vue3 项目、2.安装和配置 Electron、3.兼容 mac等,UP主更多精彩视频,请关注UP账号。
1. 安装 vite npm create vite 2. 创建项目 输入具体的vite项目名字,这里是vite-project Project name: ... vite-project Select a framework: » vue Select a variant: » vue-ts 3. 进入且运行 进入项目,在运行前需要先安装下依赖。 npm install npm run dev 4. 安装electron npm add --dev elect...
1. 搭建vite+vue-ts的项目 yarn create vite@ vuets_electron --template vue-tscd./vuets_electron yarn install && yarn dev AI代码助手复制代码 2. 接入electron 为了保证electron能够正常安装,在vuets_electron的根目录下创建.npmrc, 设置一下electron的镜像源 ...
1、执行如下命令创建一个新的Vite项目: $ yarn create vite 输入项目名称:electron-client,选择框架:Vue,之后选择使用JavaScript。 2、进入项目根目录: $cdelectron-client 3、安装项目依赖: $ yarn add --dev electron concurrently cross-env electron-builder wait-on ...
1.基础项目搭建 还没有简单基础项目的小伙伴赶紧搭建一个 Electron 项目,具体可以参考:Electron + Vue3 + TS + Vite 桌面应用项目搭建教程。 我们先来看一下基础的项目目录结构吧,如下图: 本篇文章我们重点关注 electron-main 这个目录,该目录就是 electron 项目的主进程目录,我们将在这里面封装打开新窗口的一些...
1.初始化vue3项目 2.安装electron、electron-win-state 3.根目录新增main.ts文件 4.package.json文件新增入口文件,和执行...
Electron 官方的快速 入门指南,跟本文近似。但是根据 Vite+ Vue 做了一些适应性的修改 。 第一步,我们要在项目中,安装 Electron 的依赖。 npm install --save-dev electron 根据Electron 的官方文档,描述。 一个最基础的 Electron 桌面应用 结构应该是这样的。
1.基础项目搭建 还没有简单基础项目的小伙伴赶紧搭建一个Electron项目,具体可以参考:Electron + Vue3 + TS + Vite 桌面应用项目搭建教程。 我们先来看一下基础的项目目录结构吧,如下图: 本篇文章我们重点关注electron-main这个目录,该目录就是electron项目的主进程目录,我们将在这里面封装打开新窗口的一些方法。