记录 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)
})
相关推荐
子兮曰8 分钟前
🔥深度解析:Nginx目录浏览美化与功能增强实战指南
前端·javascript·nginx
我是日安10 分钟前
从零到一打造 Vue3 响应式系统 Day 4 - 核心概念:收集依赖、触发更新
前端·vue.js
NeverSettle_15 分钟前
React工程实践面试题深度分析2025
javascript·react.js
大可门耳28 分钟前
qt调用cef的Demo,实现js与C++之间的交互细节
javascript·c++·经验分享·qt
烛阴29 分钟前
【TS 设计模式完全指南】TypeScript 装饰器模式的优雅之道
javascript·设计模式·typescript
aidingni88840 分钟前
掌握 JavaScript 中的 Map 和 Set
前端·javascript
闲云野鹤_41 分钟前
JavaScript学习笔记
javascript
努力往上爬de蜗牛41 分钟前
react3面试题
javascript·react.js·面试
开心不就得了43 分钟前
React 进阶
前端·javascript·react.js
jeff渣渣富1 小时前
Taro 2.x 分包优化实践:如何防止分包文件被打包到主包
前端·javascript