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...
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 第一...
我们修改Login.vue,增加以下代码(只展示关键代码,部分样式和html请查看git上的代码): const{ipcRenderer}=require('electron')// 点击最小化按钮调用的方法minimize(){ipcRenderer.send('minimize')},// 点击关闭按钮调用的方法close(){ipcRenderer.send('close')}, 窗口的拖动需要增加以下样式: -webkit-app-reg...
Vue.use(ElementUI); new Vue({ el: '#app', render: h => h(App) }); 准备工作已经完成了,接下来就进入正式的开发了 1.修改窗口大小 通常登录窗口比较小,这个我们将登录窗口大小设置为宽:400,高:550 background.js win = new BrowserWindow({ ...
electron-vue跨平台桌面应用开发实战教程(三)——动态修改窗口大小 我们基于上一篇文章的代码(上一篇文章的git地址:https://gitee.com/hedavid/ele...)接着写。先看下上一篇文章实现的样式: 接下来我们就要开始今天的讲解了 1.去掉外边框 我们修改background.js,修改createWindow方法,创建BrowserWindow时增加 ...
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...
多数桌面应用在初次启动时显示的窗口较小，如登录界面，待用户登录成功后，展示一个更大窗口，呈现后续功能。以QQ、钉钉、有道云笔记等应用为例，它们均具备这一特性。为了演示如何实现窗口大小动态变化，我们开发了一个简单应用。应用采用的技术包括element-ui和lowdb。基于前文介绍的electron-vue项目搭建...
最后在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 ...