记录 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)
})
相关推荐
清幽竹客1 小时前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim1 小时前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
paopaokaka_luck1 小时前
基于SpringBoot+Vue的电影售票系统(协同过滤算法)
vue.js·spring boot·后端
滿1 小时前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
专注VB编程开发20年1 小时前
javascript的类,ES6模块写法在VSCODE中智能提示
开发语言·javascript·vscode
某公司摸鱼前端6 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~7 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程7 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
wen's8 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
vvilkim9 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron