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跨平台桌面应用开发实战教程(三)——动态修改窗口大小 我们基于上一篇文章的代码(上一篇文章的git地址:https://gitee.com/hedavid/electron-vue-demos)接着写。先看下上一篇文章实现的样式: 登录页 主页 接下来我们就要开始今天的讲解了 1.去掉外边框 ...
electron-vue跨平台桌面应用开发实战教程(三)——动态修改窗口大小 我们基于上一篇文章的代码(上一篇文章的git地址:https://gitee.com/hedavid/electron-vue-demos)接着写。先看下上一篇文章实现的样式: 接下来我们就要开始今天的讲解了 1.去掉外边框
开发前端界面:利用Vue3的组件化开发方式,开发应用的前端界面。 构建和运行:通过修改package.json文件中的配置,添加构建脚本。然后运行构建脚本,即可生成适用于不同操作系统的桌面应用程序安装包。 Electron是一个开源的跨平台桌面应用程序开发框架,由GitHub开发和维护。它基于Chromium和Node.js,使用Web技术(HTML、CSS和Jav...
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 主要分为主进程(background.js)、渲染进程(也就是vue开发的页面)和GPU进程等,但是我们主要使用的就是主进程和渲染进程,其他进程暂时不做深入研究。 主进程: 一个应用中有且只有一个主进程 创建窗口等所有系统事件都要在主进程中进行 渲染进程: ...