electron-vue

Electron-vue取消代码检查Eslint 博客说明 文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！ 介绍 在项目运行的时候容易出现错误，特别是这种检查代码的，什么格式啊，甚至分号呀，一来就是一大推 方法一 在创建项目的时候不使用eslint 这里选择no 方法二 在.elerton-vue目录下里面的三个文件都修改一下 把有关eslint的都注释掉 记得要重新 npm run dev 感谢 万能的网络 以及勤劳的自己 来源： oschina 链接： https://my.oschina.net/guizimo/blog/4339669

TP5.1验证Token和Electron-vue头部携带Token 博客说明 文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！ 介绍 在做一个Electron-vue的项目的时候需要使用到登录，使用TP5.1作为后台框架，正规的流程是在Electron-vue中携带Token信息，在TP5.1中验证Token来判断是否过期 Electron-vue头部携带Token 在配置拦截器的时候配置请求头 // request拦截器 service.interceptors.request.use(config => { if (store.getters.token) { config.headers['Authorization'] = store.getters.token// 让每个请求携带自定义token 请根据实际情况自行修改 } return config }, error => { // Do something with request error console.log(error) // for debug Promise.reject(error) }) 注意这个Authorization必须是在后端跨域的Access-Control-Allow-Headers参数中有的，比如 Access-Control

　　配置 " build " : { " productName " : " xxxx " , // 项目名 这也是生成的exe文件的前缀名 " appId " : " com.leon.xxxxx " , // 包名 " copyright " : " xxxx " , // 版权 信息 " directories " : { // 输出文件夹 " output " : " build " }, " nsis " : { " oneClick " : false , // 是否一键安装 " allowElevation " : true , // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。 " allowToChangeInstallationDirectory " : true , // 允许修改安装目录 " installerIcon " : " ./build/icons/aaa.ico " , // 安装图标 " uninstallerIcon " : " ./build/icons/bbb.ico " , // 卸载图标 " installerHeaderIcon " : " ./build/icons/aaa.ico " , // 安装时头部图标 " createDesktopShortcut " : true , // 创建桌面图标

vue-cli+electron一种新的脚手架(vue-electron) vue-electron主要业务逻辑都放在src下的renderer文件夹内，和之前的vue-cli搭建项目流程没有任何区别 GIT地址： https://github.com/SimulatedGREG/electron-vue 搭建项目： 　　1.全局安装脚手架： npm install -- global vue-cli 　　2.创建项目： //demo06 是项目名称 vue init simulatedgreg/electron-vue demo06 3.cd到项目文件里面，安装依赖： cd demo06 npm install 4.启动这个项目： npm run dev 启动成功之后会自动跳出程序窗口 到此项目结构就搭建好了 关于打包的后面再整理 原文出处：https://www.cnblogs.com/wuhefeng/p/10576034.html 来源： oschina 链接： https://my.oschina.net/u/4411978/blog/3267645

vue-electron官方文档(中文): https://simulatedgreg.gitbooks.io/electron-vue/content/cn vue-electron官方文档(英文): https://simulatedgreg.gitbooks.io/electron-vue/content/en 1.脚手架搭建流程步骤 # 安装 vue- cli 和 脚手架样板代码 npm install -g vue- cli vue init simulatedgreg /electron-vue my- project # 安装依赖并运行你的程序 cd my - project yarn # 或者 npm install yarn run dev # 或者 npm run dev 2.效果图 注意: (1)环境问题: 可以参考我的这篇文章 VsCode源码编译运行 环境与其保持一致，基本上就不会出什么问题。 (2)包管理工具问题: 关于npm和yarn，两者都是包的管理工具 我用npm install总是在报Error之类的错误，用yarn就好了。 来源： oschina 链接： https://my.oschina.net/u/4358626/blog/3585680

之前一直使用C#编写桌面应用，也顺带写一些Web端应用。最近在看node时发现常用的vscode是用electron编写的，一种想吃螃蟹的念头就涌了上来。 在网上找了找electron的资料，也研究了一下官方文档，发现electron app其实就是一个chrome浏览器，UI全部都是使用web端技术编写的，因为之前一直使用Vue来写Web应用，所以自然就想到Vue+Electron的组合。 在网上找了找，居然有现成的轮子 Electron-Vue ，立即install使用，可是发现最后却不那么如人意，在最后build时，总是出错，后来终于发现是网络与build配置的问题。搞得人很头疼。 于是最后决定自己动手，将Vue生成的静态网页与Electron结合。 1.Vue使用webpack项目，build之后在dist文件夹中会有静态网页生成，这样生成的网页放在web容器中可以正确访问，但如果在本地直接打开引用文件路径会出错，后来发现是因为生成后的index.html与资源不在一个目录层。 修改webpack项目中config/index.js为 1 build: { 2 // Template for index.html 3 index: path.resolve(__dirname, '../dist/index.html' ), 4 5 // Paths 6

在electron-vue中，一般有两个进程：主进程和渲染进程。这两个进程在框架搭建的时候就已经配置好了，它们之间能够正常的互相通讯。但是，由于某些操作比较耗时等原因，我们需要一个后台worker，以避免界面阻塞卡顿的不好体验。调研之后发现，electron可以使用多种后台工作方式：1. webworker；2. 使用隐藏的渲染进程。 webworker有一些优势：编写方便，轻量级。但是缺点是：不能直接使用页面中的数据，node的库函数对多线程支持不安全，打包困难。 使用隐藏的渲染进程优点是可以按照正常的node代码编写，缺点是与主渲染进程交互需要通过主进程来进行。 下面是如何创建隐藏的渲染进程并与另一个渲染进程互相通讯的示例： 首先，需要确定后台渲染进程的html页面位置，我们把它称为worker.html。下面的代码添加在index.js中： const workerURL = process.env.NODE_ENV === 'development' ? `worker.html` : `file: // ${__dirname}/worker.html` 对于开发模式，worker.html会从dist/electron/文件夹下读取。 接下来在createWindow()中添加如下代码，创建一个隐藏的渲染窗口，为了调试方便，可以将show参数设置为true：

桌面应用之electron开发与转换 一,介绍与需求 1.1,介绍 1. Electron简介 Electron 是用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和 Node.js 合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。目前，Electron已被Microsoft、Facebook、Slack和 Docker等大厂接受，应用涉及开发工具、社交应用、音乐、游戏、金融等领域。 2. Node.js简介 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。 3. 脚手架—electron-vue简介 electron-vue 是一个结合electron和Vue.js的项目，非常方便建立起electron应用程序模版。 Vue.js 是当前比较火的JavaScript MVVM库, 它以数据驱动和组件化的思想构建前端应用，被越来越多的前端开发者接受。采用electron-vue脚手架之后，你可以使用 webpack、electron-packager 或 electron-builder，vue-router、vuex 等最常用的插件。 1.2

本文主要讲解electron如何执行使用electron-updater更新应用 1.安装electron-updater npm install electron-updater --save-dev 2.编写更新代码 const { autoUpdater } = require('electron-updater') ipcMain.on('checkForUpdate', e => updateHandle() ) // 检测更新，在你想要检查更新的时候执行，renderer事件触发后的操作自行编写 function updateHandle () { autoUpdater.checkForUpdates() const message = { error: '检查更新出错', checking: '正在检查更新……', updateAva: '检测到新版本，正在下载……', updateNotAva: '现在使用的就是最新版本，不用更新' } autoUpdater.setFeedURL('http://127.0.0.1/exe') // eslint-disable-next-line handle-callback-err autoUpdater.on('error', function (error) { sendUpdateError(JSON

本文主要讲解electron如何执行cmd命令 通常我们有些功能是需要借助外部程序才能完成的，例如通过我们写的electron启动nginx或者获取本机的一些信息。 执行cmd命令不需要安装额外的依赖，使用node的child_process模块即可完成这个功能。 1.引用child_process模块 import { exec } from 'child_process' 2.执行CMD命令 这里我们执行一下windows常用命令ipconfig，使用child_process执行cmd命令是可以指定执行的目录的（cmdPath） // 任何你期望执行的cmd命令，ls都可以 const cmdStr = 'ipconfig' // 执行cmd命令的目录，如果使用cd xx && 上面的命令，这种将会无法正常退出子进程 const cmdPath = pathUtil.getAppResourcePath('') // 执行命令行，如果命令不需要路径，或就是项目根目录，则不需要cwd参数： const workerProcess = exec(cmdStr, { cwd: cmdPath }) // 不受child_process默认的缓冲区大小的使用方法，没参数也要写上{}：workerProcess = exec(cmdStr, {}) // 打印正常的后台可执行程序输出