electron可以结合前端的很多框架来进行快速的开发.在这里只讲一种electron结合vue并且使用前端的elementui来快速搭建一个项目页面. 第一步.创建electron 以管理员身份运行cmd,想好要把项目存放的位置,并cd进去(我一般关于项目的任何东西都不会用中文,代码注释除外). 在cmd中运行:   vue init simulatedgreg/electron-vue eleproject01    (1)eleproject01是项目的名字(不能有大写字母) (2)sas

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

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项目初

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

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

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

导航: (一)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组件

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

前言:研究electron自动更新的时候,在electron的官方文档auto-updater 中,提到了在几个平台mac,Linux,windows下electron 的自动更新方法,其中windsow平台上面,文章中建议先用grunt-electron-installer 模块来创建windows安装包,grunt这个工具是由Squirrel集成的.进而了解下Squirrel这个工具, 一个可以用来给electron应用的安装更新卸载添加快捷方式的工具.本文主要提及如何在windows平台下

创建一个vue项目: 1.首先从UI手上拿到PSD设计图,然后看设计搞的内容,需要做个大概的页面布局 2.做vue之前不许安装node,因为做vue项目要和node结合使用 3.然后安装vue脚手架:npm install vue-cli -g; 4.然后依托webpack配备项目文件:vue init webpack system(名字可以任意) 5.安装项目依赖:npm install  6.安装vue-resource: npm install vue-resource --save -d

<1>. 在项目里安装vux npm install vux --save <2>. 安装vux-loader (这个vux文档似乎没介绍,当初没安装结果报了一堆错误) npm install vux-loader --save-dev <3>. 安装less-loader  (这个是用以正确编译less源码,否则会出现 ' Cannot GET / ') npm install less less-loader --save-dev <4>. 安装yaml

npm: Nodejs下的包管理器. webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包. vue-cli: 用户生成Vue工程模板.(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装) [一]mac检查是否安装node.js nvm --version => node -v =>v10.7.0 [二]安装web-pack -g cnpm install

开始创建一个 Vue 项目 安装 nodejs 略 安装 npm 默认安装时自带了 npm 安装 cnpm 为了更快的下载组件,使用cnpm,cnpm 是淘宝前端的镜像. 使用 npm 安装 cnpm npm i cnpm -g 初始化 npm 项目 cnpm init 安装组件 注意加 --save,可以将依赖写入 package.json 中,以后安装时只需 npm i 就可以了. cnpm i css-loader vue vue-loader vue-template-compiler

每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({         // 选项 }) 选项:el.data.methods el: 类型:string | HTMLElement 限制:只在由 new 创建的实例中遵守. 详细:提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标.可以是 CSS 选择器,也可以是一个 HTMLElement 实例. 例如:el: "#app" data 类型:Object 定义

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

1.第一步安装node.js https://nodejs.org/en/ 前期可以下载软件包,后期熟练以后可以通过nvm进行 Node的版本切换以及升级 然后window+r  输入cmd 打开命令行  输入node -v  查看版本号 如: 2 .安装cnpm(淘宝国内加速)npm install -g cnpm --registry=https://registry.npm.taobao.org 3.全局安装vue cnpm install vue-cli -g             

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