记录 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)
})
相关推荐
eason_fan31 分钟前
Git 大小写敏感性问题:一次组件重命名引发的CI构建失败
前端·javascript
前端付豪2 小时前
1、震惊!99% 前端都没搞懂的 JavaScript 类型细节
前端·javascript·面试
朝与暮2 小时前
js符号(Symbol)
前端·javascript
大怪v3 小时前
前端:人工智能?我也会啊!来个花活,😎😎😎“自动驾驶”整起!
前端·javascript·算法
遂心_5 小时前
为什么 '1'.toString() 可以调用?深入理解 JavaScript 包装对象机制
前端·javascript
王同学QaQ5 小时前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
华仔啊5 小时前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
程序员鱼皮6 小时前
刚刚 Java 25 炸裂发布!让 Java 再次伟大
java·javascript·计算机·程序员·编程·开发·代码
Asort6 小时前
JavaScript 从零开始(五):运算符和表达式——从零开始掌握算术、比较与逻辑运算
前端·javascript
一枚前端小能手6 小时前
🚀 缓存用错了网站更慢?前端缓存策略的5个致命误区
前端·javascript