import { useRouter } from 'vue-router'; const router = useRouter() const go = () => { router.push('/'); }; 「3、配置路由表」 在src下新建一个router目录,然后在里面添加一个index.ts文件,在里面配置路由 // src\router\index.ts import { createRouter, createWebHashHistory } from '...
bash npm run electron:build 这将使用electron-builder来打包你的应用程序,并在dist_electron目录下生成可执行文件。根据你的操作系统,这些文件可能包括Windows的.exe文件、macOS的.dmg文件或Linux的.AppImage文件等。 完成以上步骤后,你就成功地使用Vue 3、Vite和Electron打包了一个桌面应用程序。
结合Electron Forge、Vite和Vue 3,你可以快速构建功能丰富的跨平台桌面应用程序,尽管你可能只懂web开发,你一样可以轻松的开发出各式各样的桌面应用。而且Vite的快速热更新能力和Vue 3的高效性能,加速了开发周期,使得开发者能够更快地迭代和测试应用。很多vue3的UI可以使用,例如本文选用的arco-design,这就是站在巨人...
1.初始化项目 我们需要先借助Vite初始化一个Vue3+TS 的项目,后面我们在逐步添加electron,在任何一个文件夹下: 执行命令: npm create vite@latest my-vue-app -- --template vue-ts 安装依赖: npm install 运行项目: npm run dev 这样一个最简单的Vue3 + TS + Vite的前端项目就初始化好了。 2.安装Elec...
Electron、Vite和Vue3的结合,为我们提供了一个强大而灵活的解决方案,能够快速开发出美观、功能丰富的跨平台桌面应用。 一、Electron简介 Electron是一个使用Web技术(HTML, CSS, 和JavaScript)来创建跨平台桌面应用程序的框架。它结合了Chromium和Node.js,让开发者能够使用前端技术来编写应用界面,并通过Node.js访问底层...
1.安装vite,创建vue3项目 npm init vite npm install npm run dev 2.vue项目中下载electron npm install electron -D 如果失败用下面的 npm install -g cnpm --registry=https://registry.npmmirror.com cnpm install --save-dev electron 3.在main.js中加入代码 ...
基于Vite+Vue3+Electron整了一个桌面应用模板 目录 前言: 准备工作: 架构设计: 基本代码: 代码结构: 主进程(main.js): 子进程: 工具函数: 消息中心: electron模块: 在vue的全局调用上述几个函数: 脚本: 问题避坑: 搭建上述软件时遇到以下问题: 总结:...
基于Vite+Vue3+Electron整了一个桌面应用模板 目录 前言: 准备工作: 架构设计: 基本代码: 代码结构: 主进程(main.js): 子进程: 工具函数: 消息中心: electron模块: 在vue的全局调用上述几个函数: 脚本: 问题避坑: 搭建上述软件时遇到以下问题: 总结:...
Vue3 Vite electron 开发桌面程序 Electron是一个跨平台的桌面应用程序开发框架,它允许开发人员使用Web技术(如HTML、CSS和JavaScript)构建桌面应用程序,这些应用程序可以在Windows、macOS和Linux等操作系统上运行。 Electron的核心是Chromium浏览器内核和Node.js运行时环境。Chromium内核提供了现代浏览器的功能,例如HTML5和...
3. 安装electron npm install --save-dev electron npm install --save-dev electron@20.0.0 指定版本 注意:在electron21+后调用C++动态库会出现Error: Error in native callback错误,原因:Electron 21 及更高版本将启用 V8 内存隔离区,这将对一些原生模块产生影响。 解决方案:降低electron版本,目前论坛大部分使用...