electron会默认显示边框和标题栏,如下图 我们来看一下如何自定义一个更加有(gao)意(da)思(shang)的标题栏,例如网易云音乐这种 首先我们要把默认的标题栏删掉,找到主进程中创建窗体部分,new BrowserWindow时添加参数frame: false即可 mainWindow = new BrowserWindow({ useContentSize: true, frame: false, }) 这样会把标题栏和边框一并隐藏 然后我们开始制作自己的标题栏创建Mytitle组件…

基于vue.js开发的小巧PC端自定义滚动条组件VScroll. 前段时间有给大家分享一个vue桌面端弹框组件,今天再分享最近开发的一个vue pc端自定义滚动条组件. vscroll 一款基于vue2.x开发的网页端轻量级超小巧自定义美化滚动条组件.支持是否原生滚动条.鼠标移出是否自动隐藏.自定义滚动条尺寸及颜色等功能. 组件在设计开发之初借鉴了 el-scrollbar 及 vuebar 等组件设计思想. 通过简单的标签写法  <v-scroll>...</v-scroll> …

1.概述 开发平台OS:windows 开发平台IDE:vs code 本篇章将介绍自定义标题栏和右键菜单项,基于electron现有版本安全性的建议,此次的改造中主进程和渲染进程彼此语境隔离,通过预加载(preload.js)和进程间通信(ipc)的方式来完成. 2.窗口最大化 一些应用在实际情况中,希望启动的时候就以窗口最大化的方式呈现,BrowserWindow对象提供了窗口最大化的方法:win.maximize(),具体如下所示: const win = new BrowserWindo…

Electron+Vue开发跨平台桌面应用 xiangzhihong发布于 2019-12-23 虽然B/S是目前开发的主流,但是C/S仍然有很大的市场需求.受限于浏览器的沙盒限制,网页应用无法满足某些场景下的使用需求,而桌面应用可以读写本地文件.调用更多系统资源,再加上Web开发的低成本.高效率的优势,这种跨平台方式越来越受到开发者的喜爱. Electron是一个基于Chromium和 Node.js,使用 HTML.CSS和JavaScript来构建跨平台应用的跨平台开发框架,兼容 Mac.…

# 1 最近一直在使用electron开发桌面应用,对于一个web开发者来说,html+javascript+css的开发体验让我非常舒服.之前我一直简单的以为electron只是张网页加个壳,和那些号称跨平台的运行在手机上的webapp是一个套路.直到我真的需要开发一个跨平台桌面应用的时候,我又认真的尝试了一下electron,我开始意识到:这才是我理想中的跨平台桌面应用开发的最终形态,它简直太优秀了. # 2 在使用electron期间,我顺便写了一个简单的todolist(便签)应用,用于…

1.概述 开发平台OS:windows 开发平台IDE:vs code 上一篇中已完成了electron-vue项目的创建,本篇章中则介绍在此项目基础上进行取消devtools的安装.项目结构的改造.环境变量的配置以及elementui的集成等. 2.取消devtools的安装 上一篇中在启动electron-vue项目时,会等待一段时间后才正常启动应用,此时查看控制台日志能看出来是它请求安装devtools失败后的5次尝试,现在我们取消deltools的安装以换来启动的第一次提速. 打开src…

1.概述 electron:使用javascript.css.html构建跨平台的桌面应用程序 vue:数据驱动视图中的一款渐进式的javascript框架 element:基于vue的桌面端UI组件库 开发平台OS:windows 开发平台IDE:vs code 构建项目模板由创建项目.改造项目.自定义标题栏.打包项目等几个篇章组成,最终产出物是将electron.vue.element三者结合起来,构建出来的一款现代化的桌面应用程序模板.在构建项目之前需具备nodejs.vue-cli环境基…

.现如今前端框架数不胜数,尤其是angular.vue吸引一大批前端开发者,在这个高新技术快速崛起的时代,自然少不了各种框架的结合使用.接下来是介绍electron+vue的结合使用. 2.Electron是什么?? 对于我来说Electron相当于一个浏览器的外壳,可以把网页程序嵌入到壳里面,可以运行在桌面上的一个程序,可以把网页打包成一个在桌面运行的程序,通俗来说就是软件,比如像QQ.优酷.网易音乐等等.功能的强大超出你的想象,可以构建跨平台桌面程序,本身支持node.js,可以使用node…

导航: (一)Electron跑起来(二)从零搭建Vue全家桶+webpack项目框架(三)Electron+Vue+Webpack,联合调试整个项目(四)Electron配置润色(五)预加载及自动更新(六)构建.发布整个项目(包括client和web) 摘要:整个项目就剩最后一哆嗦了,但仅仅是当作demo模版来说,实际项目的话,还有很多需要细化的地方.项目完整代码:https://github.com/luohao8023/electron-vue-template,随博客更新. 一.打包客户…

一.环境介绍及会遇到的困难 electron是一款比较流行的桌面可视化开发工具,通过html+js+css实现桌面应用,优点就是多平台开发以及UI好看.缺点是外网npm仓库速度慢.话不多说开始我的教程,和可能遇到的坑的解决办法. 二.全局配置npm以及需要的包 安装的过程要是出现报错可以试试 cnpm update,更新npm 1.npm地址配置 1 #切换npm源为淘宝地址 2 npm config set registry https://registry.npm.taobao.org/ 3…