cd vue-electron-notes进入项目跑一遍yarn serve,这个时候没什么问题就已经成功运行起来了! 2.2 在项目内集成Electron 进入我们项目的根目录,我们执行以下命令来安装插件vue-cli-plugin-electron-builder 代码语言:javascript 复制 vue add vue-cli-plugin-electron-builder 我们选择版本^6.0.0: 代码语言:javascript 复制...
1.1 安装vue-cli 先查看是否已经安装了vue-cli,vue-cli的版本是什么 vue -V 如果版本叫老,可以直接卸载,再安装最新版本 卸载 npm uninstall vue-cli-g 安装 install @vue/cli -g 1.2 使用vue-cli创建项目 选取一个项目存放的路径,然后开始创建项目 例如: vuecreateelectron-vue-helloworld 这里将项目名定为:e...
最后在Home.vue中使用我们的FileEdit组件: .sync 这个也是vue 2.3.0+之后新加的一个语法糖,平时在封装组件的时候很好用的一个语法糖,它的实现机制和v-model是一样的。我们可以先看下官方文档:https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6 “在有...
1.2 使用vue-cli创建项目 选取一个项目存放的路径,然后开始创建项目 例如: vue create electron-vue-helloworld 这里将项目名定为:electron-vue-helloworld 输入完上述命令之后进入vue项目的创建过程。出现以下内容 VueCLIv3.8.4?Pleasepick a preset:(Usearrow keys)default(babel,eslint)>Manuallyselectfeatures 第一...
Vue.use(ElementUI); new Vue({ el: '#app', render: h => h(App) }); 准备工作已经完成了,接下来就进入正式的开发了 1.修改窗口大小 通常登录窗口比较小,这个我们将登录窗口大小设置为宽:400,高:550 background.js win = new BrowserWindow({ ...
前边两篇文字简单介绍了一下怎么搭建electron-vue项目,主进程的基本配置,主进程和渲染进程之间的通讯。本文我们主要来讲解下如何动态的修改窗口大小。 通常很多桌面应用,初次打开都需要登录,登录窗口比较小,登录成功之后展示一个更大的窗口,展示登录后的信息。例如QQ,钉钉,有道云笔记这些应用。
electron-vue跨平台桌面应用开发实战教程(三)——动态修改窗口大小 我们基于上一篇文章的代码(上一篇文章的git地址:https://gitee.com/hedavid/electron-vue-demos)接着写。先看下上一篇文章实现的样式: 接下来我们就要开始今天的讲解了 1.去掉外边框
import{app,protocol,BrowserWindow,ipcMain}from'electron'ipcMain.on('changWindowSize',e=>win.setSize(1050,700)) Home.vue <template></template>const{ipcRenderer}=require('electron')exportdefault{name:'Home',mounted(){this.changeWindowSize()},methods:{changeWindowSize(){ipcRenderer.send('chang...
electron-vue-demos gitee 地址 3. 调用libdemo.dylib文件中的方法 这里dll是找的别的写好的,dylib是我自己写的 let cpplib if (process.platform === 'darwin') { // 在使用libdemo的时候最好自己编译下cpp,命令gcc -g -shared demo.cpp -o libdemo.dylib let libPath // 在这儿需要判断下是开发环境...
多数桌面应用在初次启动时显示的窗口较小，如登录界面，待用户登录成功后，展示一个更大窗口，呈现后续功能。以QQ、钉钉、有道云笔记等应用为例，它们均具备这一特性。为了演示如何实现窗口大小动态变化，我们开发了一个简单应用。应用采用的技术包括element-ui和lowdb。基于前文介绍的electron-vue项目搭建...