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

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

Centos7配置更新国内yum源 http://blog.csdn.net/qingguiyu/article/details/50721956 Centos7 升级python3,解决升级后不兼容问题 http://blog.csdn.net/tpc1990519/article/details/77856399…

摘要:随着前端技术的飞速发展,越来越多的技术领域开始被前端工程师踏足.从NodeJs问世至今,各种前端工具脚手架.服务端框架层出不穷,“全栈工程师”对于前端开发者来说,再也不只是说说而已.在NodeJs及其衍生技术高速发展的同时,Nw和Electron的问世,更是为前端发展提速不少,依稀记得哪位前辈说过,“能用Js改写的,终将用Js改写”,这不,客户端来了!使用Electron也有一段时间了,各种简单复杂的问题,也都或多或少的遇见过,下决心整理出一套客户端模板出来,一是加深一下自己的理解,二是供…

摘要:上篇文章说到了如何新建工程,并启动一个最简单的Electron应用.“跑起来”了Electron,那就接着把Vue“跑起来”吧.有一点需要说明的是,webpack是贯穿这个系列始终的,我也是本着学习的态度,去介绍.总结一些常用到的配置及思路,有不恰当的地方,或者待优化的地方,欢迎留言.项目完整代码:https://github.com/luohao8023/electron-vue-template 下面开始~~~ 一.安装依赖 vue.webpack:不多说了 vue-loader:解析…

公司开发的产品都是用c++写的,而且还都是几个人,老板想搞下创新,就是看看能否通过其它的方式来实现前后端分离.然后我就了解到了electron这个东西,之前学安卓的时候看到过flutter,不经意间看到了electron,但是没有仔细看,就知道是写工具的.所以最近突然想起来这个东西可以搞一搞.所以我打算以后经常分享一些自己学到的东西给大家.多的不说,上菜. 1.首先创建一个electron+vue的项目(开发工具 Vs Code),用vs打开打开之后的样子. 2.在渲染进程中创建一个js(Men…

sudo apt-get update: 升级安装包相关的命令,刷新可安装的软件列表(但是不做任何实际的安装动作) sudo apt-get upgrade: 进行安装包的更新(软件版本的升级) sudo apt-get dist-upgrade: 除了拥有upgrade的全部功能外,dist-upgrade会比upgrade更智能地处理需要更新的软件包的依赖关系. sudo do-release-upgrade: 进行系统版本的升级(Ubuntu版本的升级),Ubuntu官方推荐的系统升级方式…

Electron 和 Vue 都是干啥的,就不做过多介绍了,可以去官网瞅瞅.下面总结 Electron+Vue 创建项目,Electron + Vue 创建项目实际上相当于:创建Vue项目 + Electron封装. 一.创建Vue项目 + Electron封装 1.创建Vue项目 通过 Vue脚手架工具 vue-cli 创建Vue项目:vue init webpack xxxxxx (注:项目名称中不能出现大写字母) vue init webpack electron-vue 等待Vue项目初…

导航: (一)Electron跑起来(二)从零搭建Vue全家桶+webpack项目框架(三)Electron+Vue+Webpack,联合调试整个项目(四)Electron配置润色(五)预加载及自动更新(六)构建.发布整个项目(包括client和web)(未完待续) 摘要:到目前为止,我们的项目已经具备了PC客户端该有的一些基础功能和调试环境,但是总感觉缺了灵魂,那就是结合实际项目.实际业务的细节处理,缺着吧...这篇文章就介绍一下预加载和自动更新,文字功底有限,如有介绍的不清楚的地方,欢迎留言…

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

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

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

Node环境搭建 本文假定你完成了nodejs的环境基础搭建: 镜像配置(暂时只配置node包镜像源,部分包的二进制镜像源后续讨论).全局以及缓存路径配置,全局路径加入到了环境变量 $ node -v v12.18.1 $ npm -v 6.14.5 $ yarn -v 1.22.4 $ npm list -g --depth 0 +-- hexo@4.2.1 // 忽略Hexo,本人写博用的 `-- yarn@1.22.4 vue脚手架安装 为了更加便捷的创建一个vue项目,我们安装脚手架@v…

一.环境介绍及会遇到的困难 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…

系列目录: 本系列分为项目集成.项目部署.架构演进三个方向,后续会根据情况调整文章目录. 本系列第一篇:Taurus.MVC V3.0.3 微服务开源框架发布:让.NET 架构在大并发的演进过程更简单. Taurus.MVC 微服务框架 入门开发教程:项目集成:1.服务端:注册中心.网关. Taurus.MVC 微服务框架 入门开发教程:项目集成:2.客户端:ASP.NET(C#)编程语言项目集成:应用中心. Taurus.MVC 微服务框架 入门开发教程:项目集成:3.客户端:其它编程语言项目…

页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox> <yd-flexbox-item>能耗排行</yd-flexbox-item> <yd-flexbox-item>房间号</yd-flexbox-item> <yd-flexbox-item>能耗程度</yd-flexbox-item&g…

原文发表于本人博客,点击进入使用vue开发微信公众号下SPA站点的填坑之旅 本文为我创业过程中,开发项目的填坑之旅.作为一个技术宅男,我的项目是做一个微信公众号,前后端全部自己搞定,不浪费国家一分钱^_^. 我决定实现如下功能 架构上,实现前后端分离.方便以后前后端的分工 考虑到体验,前端做成SPA站点,也就是单页面应用 需要使用微信的JSSDK 需要有微信支付功能 作为一个偏后端的半专业前端人士,经过一两周的调研和学习后, 我决定使用如下技术 后端使用php搭建接口,本文主要讲前端,不细说 w…

现在在开发electron客户端,windows签名使用了签名狗的方式进行签名(小坑:签名狗只能对打包完的exe进行签名,而electron-builder需要在打包的时候将证书配置进去,所以需要导出签名狗中的cer证书,然后加入到项目中配置一下: ) 但是在mac上签名的时候,遇到了一大堆问题,大家具体可以参考这篇文章:https://segmentfault.com/a/1190000012902525 里面的appId为你的包名,然后我配置成功了之后,进行升级,出错了: 在请教大佬之后,发…

前言 上一篇文章 手写 Vue 系列 之 Vue1.x 带大家从零开始实现了 Vue1 的核心原理,包括如下功能: 数据响应式拦截 普通对象 数组 数据响应式更新 依赖收集 Dep Watcher 编译器 文本节点 v-on:click v-bind v-model 在最后也详细讲解了 Vue1 的诞生以及存在的问题:Vue1.x 在中小型系统中性能会很好,定向更新 DOM 节点,但是大型系统由于 Watcher 太多,导致资源占用过多,性能下降.于是 Vue2 中通过引入 VNode 和 Di…

Linux下python升级步骤  Python2 ->Python3 多数情况下,系统自动的Python版本是2.x 或者yum直接安装的也是2.x 但是,现在多数情况下建议使用3.x 那么如何升级呢? 下面老徐详细讲解升级步骤: 首先下载源tar包 可利用linux自带下载工具wget下载,如下所示: wget http://www.python.org/ftp/python/3.3.0/Python-3.3.0.tgz 下载完成后到下载目录下,解压 tar -xzvf Python-3.3…

在中国使用android有点郁闷,经常被屏蔽.常遇到2个升级问题,现在总结如下:  1.android studio升级时提示 Connection failed. Please check your network connection and try again 原文地址 http://www.eyeapk.com/android-studio-update.html Mac OSX中修改文件路径为 bin/idea.vmoptions (在app包中),添加如下内容 -Djava.net.…

本博客来自:http://www.mudbest.com/centos%E5%8D%87%E7%BA%A7gcc4-4-7%E5%8D%87%E7%BA%A7gcc4-8%E6%89%8B%E8%AE%B0/ 出于需求系统自带的是gcc4.4.7,版本太低无法编译,被逼无奈只能升级gcc了,碰到很多坑,下载这个玩意就用了不少时间. 1 2 3 4 5 6 [root@VM_222_92_centos ~]# gcc -v Using built-in specs. Target: x86_64-…

github地址 本地安装环境准备 安装node: * https://nodejs.org/en/download/ 配置webpack: npm install -g webpack(sudo权限) windows配置cnpm: npm install -g cnpm --registry=https://registry.npm.taobao.org 因为npm的默认仓库在国外,下载很慢,国内淘宝搞了个CNPM,每10分钟同步一次,完全够用了 当然也可以使用yarn下载 npm insta…

Spring Boot 2.x 已经发布了很久,现在 Spring Cloud 也发布了 基于 Spring Boot 2.x 的 Finchley 版本,现在一起为项目做一次整体框架升级. 升级前 => 升级后 Spring Boot 1.5.x => Spring Boot 2.0.2 Spring Cloud Edgware SR4 => Spring Cloud Finchley.RELEASE Eureka Server Eureka Server 依赖更新 升级前: <…

方法一:(我亲测试,没问题)首先下载:php-5.3.1-Win32-VC6-x86.ziphttp://windows.php.net/downloads/releases/archives/ 解压后,得到一个目录. 然后将原来 php目录中的:ext 目录 extras目录复制过来.遇到重复文件,不要复盖. 然后将原来的php目录中的:libmcrypt.dlllibmhash.dlllibmysql.dll复制过来. 接着将原来的php目录先备份一下, 然后删除.将5.3的文件全部复制到p…

说明 FastAdmin 于 2018-01-19 将会员模块升级为基础模块. 因为有数据库改动,所以需要对旧的数据库进行升级,不然没有办法使用和显示. 升级流程 git 合并代码 略 导入数据表 DROP TABLE IF EXISTS `fa_sms`; CREATE TABLE `fa_sms` ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT 'ID', `event` varchar(30) NOT NULL DEFAULT…

在引用模块pandas时竟然提示不支持2.6, 果断升级,在网上找了很多博客,觉得这个比较清楚(https://blog.csdn.net/my_bai/article/details/72896022) 1.# wget https://www.python.org/ftp/python/3.5.2/Python-3.5.2.tgz 2.tar -xzvf Python-3.5.2.tgz    在这步时报错,无奈报错,可能路径问题,我这种小白放弃了这步,想着能把安装下载就可以 3. 在Win…

继续上一章,转换了身份认证模式后继续将WSS_Content备份还原到2016数据库服务器上升级,发现还是报错,报错截图如下: 查看日志,提到某些网站集还体验还是2010的,需要升级,可是我明明升级了呀,一定还是之前那些警告导致的. 当然,这个项目之初的时候本来要简历个人网站的,每个个人网站是个网站集,但后面由于客户环境导致个人网站没用起来,既然没用起来,陈年老旧的东西,也没数据需要备份,直接将这些网站集全部删掉吧. 然后解决我们用到的最重要的网站集PWA. 因为是webpart,Feature…

之后还原 Project Server 2010 数据库和包含 Project Web App 网站数据的 SharePoint 内容数据库,您可以运行数据和 Project Web App 网站集升级到 Project Server 2013 所必需的步骤.实际升级过程可以分为两个单独的阶段: SharePoint 升级阶段: 检查包含 Project 网站数据的 SharePoint 内容数据库是否存在可能导致升级失败的错误. 附加并升级 SharePoint 内容数据库. 获得要升级的网站…

网上帖子一大堆,按照那些教程操作,确实可以成功安装.但是安装成功之后呢,pip还是用的python2的pip. 切换到python3的pip之后,发现无法下载模块,还会有很多报错信息.以及"require TLS/SSL, however the ssl module in Python is not avail"等等的错误.(文章最下面列出了安装过程中遇到的7类错误) 下面开始介绍闭坑的步骤: 操作系统: centos6. 一.正式安装前的准备工作: 1.重新安装openssl 详细…