在Vue组件中实现页面路由跳转• 6.5 在非Vue组件中实现页面路由跳转 7 主进程与渲染进程通信方法一:send与on/once • 7.1 预加载脚本(preload)开发• 7.2 主进程开发• 7.3 继续渲染进程开发• 7.4 运行效果• 7.5 关于ipcRenderer.on/once 8 主进程与渲染进程通信方法二:invoke与handle • 8.1 主...
先创建vue项目 npm create vite@latest electron-desktop-tool 进入到项目 执行安装和运行命令,可以看到vue项目已经启动起来了 cd electron-desktop-tool npm install npm run dev 项目可以在浏览器中跑起来,说明没毛病,下一步就在项目中引入 electron 目录结构 这是目前的目录结构 安装electron 在安装 electron之前需...
Vue 源码依旧放在src Electron 相关放在electron Vue + Vite 作为前端经常使用的,简单提一下 执行创建 Vue 项目指令 npm create vue@latest 创建一个包含Vue + Vite + TS + Pinia + ESLint + Prettier的项目 Vue3.4 至于标题特地指出Vue3.4版本,主要是新出的几个特性比较香,这里简单提一下 解析器速度提高 2 ...
先用Vite创建一个Vue3的工程,这就是你的实际项目工程 接着安装几个Electron相关的依赖,最终我的工程下的依赖情况如下: 代码语言:javascript 复制 "@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.2","electron-builder":"^...
Electron + Vue3 + Vite 开发桌面应用 效果图 技术选型 Electron 25.2.0 Vite 4.3.9 Vue 3.2.47 Yarn 1.22.18 开发步骤 1、执行如下命令创建一个新的Vite项目: $ yarn create vite 输入项目名称:electron-client,选择框架:Vue,之后选择使用JavaScript。
VUE 路由设置与Element-Plus安装 npm install vue-router npm install element-plus 安装后新建相关文件夹与文件 需要注意的是路由模式要使用hash模式 image.png router/index.ts import{createRouter,createWebHashHistory,typeRouteLocationNormalized,createWebHistory}from"vue-router";importroutesfrom"./routes";const...
5. 配置路由 安装引入依赖 npm install vue-router (1) 将app.vue内容删除,补充router-view (2) 注意:<template><router-view></router-view></template>外层套一层,如果没有会导致路由失效,具体原因忘记了 (3) 添加router.js,在里面配置路由 (5) 在main....
vue(), electron({//主进程入口文件entry:'background.js'}) ],/*开发服务器选项*/server: {//端口port:3000, } }) 如果到这一步,运行yarn dev会报错,需要在package.json文件中加入"main": "background.js"入口配置。 如果报错如下,需要去掉package.json文件中"type": "module"配置。
Electron 需要单独的main.js 和 index.html 来启动桌面程序, 其中包括构建好的Vue工程。 构建我们的Vue3 应用程序 由于我们的Vite 加 Vue3 项目,使用了一些其他技术,所以我们在部署Web 应用的时候需要先构建。 在Electron 项目中,也是同样的道理,我们需要先构建我们的Vue3 + vite 的项目。
npm install--save vue 1. 修改Vite配置 脚手架生成的Vite配置文件有三个,分别是vite.main.config.mjs、vite.reload.config.mjs和vite.renderer.config.mjs。这里修改vite.renderer.config.mjs如下。 复制 import{defineConfig}from'vite';importvuefrom"@vitejs/plugin-vue";// https://vitejs.dev/configexport...