记录 vue + vuetify + electron 安装过程

NodeJs 版本: 20

内容来自:

Electron + Vue.js + Vuetify 构建跨平台应用_思月行云的博客-CSDN博客文章浏览阅读61次。Go coding!https://blog.csdn.net/kenkao/article/details/132600542

复制代码
npm config set registry https://registry.npm.taobao.org
npm install -g yarn

yarn global add @vue/cli

// vue 创建项目时,选择 2.x 的版本,因为 vuetify 支持的 3.x 是preview版本,个人试了下有的控件不能用,比如 v-overlay,很难受
vue create files_manager

cd .\files_manager\

// 下面是我的版本需要的,因为 Node 版本过高会报错
yarn config set ignore-engines true

// 增加 View UI,选择 for 2 vue cli版本的
vue add vuetify

添加完成后,可能会提示 Home xxx 的错误,需要找到 HomeView.vue,修改导出名称为 HomeView

vue add electron-builder

// 运行 electron 测试
yarn electron:serve

安装完成后的进一步配置

【精选】Electron使用preload预加载及安全策略_electron preload-CSDN博客文章浏览阅读5k次。使用 Electron 很重要的一点是要理解 Electron 不是一个 Web 浏览器。它允许您使用熟悉的 Web 技术构建功能丰富的桌面应用程序,但是您的代码具有更强大的功能。JavaScript 可以访问文件系统,用户 shell 等。这允许您构建更高质量的本机应用程序,但是内在的安全风险会随着授予您的代码的额外权力而增加。_electron preloadhttps://blog.csdn.net/qq_30386941/article/details/127550392因为 electron 实现需要在vue 界面中监听 ipcRenderer.on 但是单纯的 import 会带来错误,所以需要修改监听方式:

创建 src/preload.js

javascript 复制代码
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('ipcRendererApi', {
    send: (channel, args) => ipcRenderer.send(channel, args),
    once: (channel, listener) => ipcRenderer.once(channel, listener),
    on: (channel, listener) => ipcRenderer.on(channel, listener),
});

在 backgroud.js 中引入

javascript 复制代码
...
import path from "path";
...


async function createWindow()
{
    const win = new BrowserWindow({
...
        webPreferences: {
...
            preload: path.join(__dirname, 'preload.js'),
        }
...

最后在 Vue 界面中可以直接使用来发送和监听

javascript 复制代码
ipcRendererApi.send('send_test_message', 'Hello from renderer process!')

ipcRendererApi.on('reply_test_message', function (args){
    console.log("Reply: ", args)
})
相关推荐
开开心心就好9 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
秋田君6 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
风吹落叶花飘荡8 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
天若有情6738 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js
烛阴9 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子9 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
DoraBigHead9 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构