https://gitee.com/yu_sheng/electron-vue 个人修改升级 electron-vue 脚手架的环境尽量不要升级,但是vue之类的版本太低,用着难受,那就升一下。
在cli目录下 执行下面代码 vue-cli-plugin-electron-builder文档链接
前言 electron-vue框架中,我们如何使用webworker,请看下文; worker-loader: https://v4.webpack.js.org/loaders/worker-loader
记录一下构建 Electron 应用程序的步骤和坑 搭建环境 为了方便,我用了 electron-vue 可别以为这东西有多好,它是 Vue 2.x 和 Webpack 4 的产物,一堆坑 首先安装 vue-cli global 你也可以安装旧版 cli $ npm install vue-cli --glboal 然后初始化项目 对于旧版 cli,你可以直接初始化 $ vue init simulatedgreg/electron-vue my-project 但是对于新版的 cli 你需要额外安装vue-init $ npm install -g @vue/cli-init $ vue init simulatedgreg/electron-vue
Electron 基于 Chromium 和 Node.js, electron-vue 基于election融合vue脚手架,来开发桌面应用,可以理解为在软件中打包了一个浏览器以支持运行桌面应用, 用开发web的方式进行开发,跨平台兼容 1环境搭建 1.1 先全局安装vue-cli脚手架 (如已经安装,可以跳过) npm install -g vue-cli 1.2 用electron-vue 模板 创建项目 vue init simulatedgreg/electron-vue my-project(项目名) 创建过程与常用脚手架创建过程基本无异; 1.3 安装依赖 (安装依赖时建议使用
electron-vue在Windows下面报process is not defined错误 使用electron-vue开发的时候报了如下错误 ? webpack v4.15.1 vue v2.5.16 vue-electron v1.0.6 electron v4.2.5 系统 windows Server 2012 R2 # 解决方法 修改项目文件 .electron-vue /node_modules') : false }), # 测试 npm run dev就可以了 # 参考资料 issue:https://github.com/SimulatedGREG/electron-vue
electron-vue开发的的时候能用regedit模块赖拿到注册表的数据,打包好了以后就拿不到注册表的数据了 就是查看了下,打好了以后regedit这个模块还是有的,但是取不出注册表的数据 regedit.list
vs生成工具.png 2、构建项目 shell: vue init simulatedgreg/electron-vue my-project 注意:需要选择electron-packager 来直接构建自己的客户端应用 修改后.png 此BUG已提给官方,详情情况请看此issuse: https://github.com/SimulatedGREG/electron-vue/issues/514 4.2、配置index
在electron-vue中配置跨域代理无效,经排查是因为在webpack中绕过了proxyTable,那么应该如何进行配置?
在Electron 中使用Vue Devtools ·首先在Chrome中安装Vue Devtools; ·在Chrome中打开扩展程序,并且开启开发者模式,这样就可以获取扩展程序的ID,记住这个ID ·在Electron应用中添加如下代码: main/index.js
electron-vue的打包 1.package.json加入以下代码 "scripts": { "build": "node .electron-vue/build.js && electron-builder ", "build:dir": "node .electron-vue/build.js && electron-builder --dir", "build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js", "build:web": "cross-env BUILD_TARGET=web node . electron-vue/build.js", "win32": "node .electron-vue/build.js && electron-builder --platform=win32 ": "node .electron-vue/dev-runner.js", "pack": "npm run pack:main && npm run pack:renderer",
注意:下面的步骤都是要基于服务端&客户端已经能实现内网穿透,如果没有,请移步:Linux环境搭建frp实现内网穿透 ---- 准备工作: 使用electron-vue框架,跑起来项目, 参考地址: https ://simulatedgreg.gitbooks.io/electron-vue/content/cn/ 跑起来长这样 image-8ce1b4df8d9d46dd8423c075c3d301cc.png child_process文档 ---- 具体代码 把解压后的frp文件夹放在electron-vue项目里 image-3e97466ba52748a8874c5397eff67487.png 在主进程里
034360截图20200108115113391.png 技术框架 框架技术:electron + electron-vue + vue 状态管理:Vuex 地址路由:Vue-router 字体图标: https://electronjs.org/ https://electron.org.cn/vue/index.html https://github.com/SimulatedGREG/electron-vue electron主进程创建窗口 通过electron提供的BrowserWindow对象创建窗体,electron-vue构建项目后,主进程入口页面是src/main/index.js import common' /** * Set `__static` path to static files in production * https://simulatedgreg.gitbooks.io/electron-vue
所以这里学学electron-vue的基础知识,首先认识下工程目录构成。 ? 目录结构 开发主进程:src/main/index.dev.js,开发主进程入口。该文件专门用于开发和安装开发工具。 vuex模块:electron-vue 利用 vuex 的模块结构创建多个数据存储,并保存在 src/renderer/store/modules 中。 Webpack 配置:.electron-vue文件夹便是存放Webpack配置文件的。里面有专门针对main和rederer的配置。 参考 electron-vue文档: https://simulatedgreg.gitbooks.io/electron-vue/content/cn/
之所以要安装@vue/init,是因为@vue/cli是3的版本,创建项目使用命令vue create app-name,且无法暂时无法使用模板,但是下文要用electron-vue模板进行创建,还是需要 来初始化你的vue项目(app-name)结构 vue init [options] <template> <app-name> 初始化Electron项目结构 在指定的目录下,我们使用如下的命令进行electron-vue 的项目初始化: $ vue init simulatedgreg/electron-vue electron-vue-demo 然而,这个过程很慢,甚至卡住不动。 下载模板源码 https://github.com/SimulatedGREG/electron-vue 下载后解压存放在 用户目录/.vue-templates/ 下(没有就创建,注意复数s),形成如下的结构 运行Electron-Vue示例 $ cd electron-vue-demo $ yarn (or `npm install`) $ yarn run dev (or `npm run dev`) 在
所以索性做了一个客户端方便进行小程序的反编译 技术选型 开发环境 涉及技术 前置准备 开源地址 使用方法 技术选型 网上已经有大佬实现了C#版的反编译工具,博主已多年没写C#所以选择了对于前端人比较友好易于上手的技术--electron-vue child_process模块执行脚本 node的compressing模块进行文件压缩 前置准备 获取小程序包的方法参见前文以中银E路通小程序为例10分钟带你学会微信小程序的反编译,这里不再赘述 开源地址 基于electron-vue
本文目录: 前言新建项目安装vue初始化一个electron-vue项目结语参考 前言 关于electron,前两天一番写了一个开头,搭建开发环境。今天一番尝试去开发一个小的例子,做一些修改。 初始化一个electron-vue项目 我们通过如下命令来初始化一个vue项目,这里需要输入一些这个项目的参数,我们一路enter默认就好了。 这里的参数efonmark就是这个项目的名称。 vue init simulatedgreg/electron-vue efonmark (不得不说下载速度太慢了,澡都洗完了,回来还没下好。) 运行 初始化完后,我们就可以进入项目目录运行这个electron-vue项目了。执行如下命令运行。 参考 electron-vue 集成 element-ui 一番雾语:方法很重要,方法的改进需要以好身体为基础的精气神。
allowed to load local resource Linux Electron打包后页面无法加载,报错:Not allowed to load local resource 背景 使用electron-vue 的时候,窗体创建后加载页面使用的是loadURL函数,并且传入的参数形如: `file://${__dirname}/index.html` PS:在electron-vue中,编译打包后的__dirname 当打包的时候需要防止webpack处理 node: { __dirname: false } webpack配置文件中的node节点,当打包的时候需要防止webpack处理__dirname,如果你使用了electron-vue
我们推荐使用electron-vue,因为它可以更好地处理工具依赖组件,并减少最终生成的构建代码大小。 AhMyth-Android-RAT https://github.com/rapid7/metasploit-framework https://simulatedgreg.gitbooks.io/electron-vue http://www.metasploit.com/ https://github.com/tomasgvivo/node-msfrpc https://github.com/SimulatedGREG/electron-vue https://github.com/vuejs/vue-cli https://simulatedgreg.gitbooks.io/electron-vue/content/index.html
本文目录: 前言布局页面组件代码实际效果参考一番今日 前言 前面我们已经对electron即相关的electron-vue、element-ui等做了一定的了解。 template>