记录 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)
})
相关推荐
記億揺晃着的那天6 小时前
Vue + Element UI 表格自适应高度如何做?
javascript·vue.js·ui
GISer_Jing7 小时前
ByteDance——jy真题
前端·javascript·面试
真的想不出名儿7 小时前
Vue 中 props 传递数据的坑
前端·javascript·vue.js
阳光阴郁大boy7 小时前
星座运势网站技术解析:从零打造现代化Web应用
前端·javascript
sorryhc7 小时前
如何设计一个架构良好的前端请求库?
前端·javascript·架构
Queen_sy8 小时前
vue3 el-date-picker 日期选择器校验规则-选择日期范围不能超过七天
javascript·vue.js·elementui
lvchaoq8 小时前
react 修复403页面无法在首页跳转问题
前端·javascript·react.js
郝开8 小时前
6. React useState基础使用:useState修改状态的规则;useState修改对象状态的规则
前端·javascript·react.js
技术钱9 小时前
vue3 两份json数据对比不同的页面给于颜色标识
前端·vue.js·json
技术钱10 小时前
react+andDesign+vite+ts从零搭建后台管理系统(三)-Layout布局
javascript·react.js·ecmascript