为Electron 安装 vue-devtool等扩展
相关代码:
https://github.com/WozHuang/Barrage-helper/blob/master/src/main/index.dev.js
在SPA逐渐成为构建优秀交互体验应用的主流方式后,使用Electron开发跨平台的软件是一个优秀的解决方案。下面简单介绍一下 Electron-vue 安装 vue-devtool的方式。
安装步骤
- 下载 vue-devtools.crx,把文件名后缀改成zip后解压放在工程目录下
(找不到或者懒得下可以直接克隆我的仓库后把这个文件夹给复制出来,我已经解压好放在里面了)
- Electron-Vue中本来是应该预装好了vue-devtool的,奈何
electron-devtools-installer
这个库不知道有什么问题,只能自己手动装了,部分代码:
// Install `vue-devtools`
require('electron').app.on('ready', () => {
// 注释掉的这部分是 Electron-Vue 中预装devtool的代码,没有用
// let installExtension = require('electron-devtools-installer')
// installExtension.default(installExtension.VUEJS_DEVTOOLS)
// .then(() => {})
// .catch(err => {
// console.log('Unable to install `vue-devtools`: \n', err)
// })
// 新增的:安装vue-devtools
BrowserWindow.addDevToolsExtension(path.resolve(__dirname, '../../devTools/vue-devtools'));
});
除了vue-devtool,安装其他的扩展也是同理,但是估计没有什么用(Electron已经为浏览器放开很多限制不需要扩展了)
效果图
最后,有兴趣可以看下这个用 Electron-vue 做的小玩具:一个弹幕助手,主要功能有显示并朗读弹幕、背景色及透明度设置和窗口置顶。
参考
为Electron 安装 vue-devtool等扩展的更多相关文章
- 【原】无脑操作:Chrome浏览器安装Vue.js devtool
学习Vue.js时,Chrome浏览器安装Vue.js devtool能很方便的查看Vue对象.组件.事件等. 本文以Chrome浏览器插件Vue.js devtools_3.1.2_0.crx的安装 ...
- Vue devtool插件安装后无法使用,提示“vue.js not detected”的解决方法
vue devtool下载 极简插件 github vue devtool安装 点击谷歌浏览器箭头所指图标-更多工具-扩展程序 ①:直接将后缀为crx的安装包拖进下图区域即可自动安装 ② ...
- 一、Electron + Webpack + Vue 搭建开发环境及打包安装
目录 Webpack + Vue 搭建开发环境及打包安装 ------- 打包渲染进程 Electron + Webpack 搭建开发环境及打包安装 ------- 打包主进程 Electron + ...
- 二、Electron + Webpack + Vue 搭建开发环境及打包安装
目录 Webpack + Vue 搭建开发环境及打包安装 ------- 打包渲染进程 Electron + Webpack 搭建开发环境及打包安装 ------- 打包主进程 Electron + ...
- Chrome安装Vue.js devtool F12无效
要安装 vue-devtools-4.1.4_0 链接: https://pan.baidu.com/s/1aeUxKJEUDW0U_i6uuAZFvQ 提取码: 4btc vue-devtools- ...
- electron打包vue项目
electron是什么 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并 ...
- chrome中安装Vue调试工具vue-devtools
一.前言 vue-devtools是一款基于浏览器的插件,用来调试vue应用.本篇文章将要总结的是如何在chrome中安装Vue的调试工具vue-devtools. 首先能想到的第一种方法就是直接在c ...
- Electron安装过程深入解析(读完此文解决Electron应用无法启动,无法打包的问题)
1. 安装Electron依赖包 开发者往往通过npm install(或 yarn add)指令完成为Node.js工程安装依赖包的工作, 安装Electron也不例外,下面是npm和yarn的安装 ...
- Vue安装Vue Devtools调试工具提示 Error: Cannot find module '@vue-devtools/build-tools' 解决办法
我看网络上面安装Vue Devtools 调试工具的步骤几乎都是按照文章链接里的步骤进行安装, 但是在最终执行编译命令的时候 :npm run build ,提示如下错误: 尝试了很多方法,都不能解决 ...
- centos yum 安装 mongodb 以及php扩展
centos yum 安装 mongodb 以及php扩展 投稿:hebedich 字体:[增加 减小] 类型:转载 MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用 ...
随机推荐
- 微信小程序:获取地理定位和显示相应的城市名称。
最近在看微信小程序,遇到地理定位显示城市名称的问题.本文就是记录这一过程. 解决方案 ...
- MPlayer 开始支持RTSP/RTP流媒体文件
hostzhu点评:MPlayer对流媒体的支持,让大家能更进一步地利用linux来看网络直播,对Linux下多媒体应用的推动作用可以说不可度量. RTSP/RTP streaming support ...
- Problem 6
Problem 6 # Problem_6.py """ The sum of the squares of the first ten natural numbers ...
- 原生js,一些小应用(逢10进一,生成V字,多个div抖动)
第一题:每隔10个div换一行.并且鼠标移入 改变opacity. <!DOCTYPE html> <html lang="en"> <head> ...
- CodeForcesGym 100548G The Problem to Slow Down You
The Problem to Slow Down You Time Limit: 20000ms Memory Limit: 524288KB This problem will be judged ...
- CSU 1541 There is No Alternative (最小生成树+枚举)
题目链接:传送门 题意: 有n个点.m条边.要使n个点所有连起来且要花费最小.问有哪些边是必需要连的. 分析: 要使花费最小肯定是做最小生成树.可是题目要求哪些边是必需要用的.我们能够 这样思考,我们 ...
- python3连接Mairadb数据库
<span style="font-size:18px;">#本代码演示的是python3.3.5下连接Mairadb数据库</span> <span ...
- Unity3D 人形血条制作小知识
这几天用Unity3D做个射击小游戏,想做个人形的血条.百思不得其解,后来问了网上的牛牛们,攻克了,事实上挺简单的,GUI里面有个函数DrawTextureWithTexCoords就能够实现图片的裁 ...
- Android 零基础学习之路
第一阶段:Java面向对象编程 1.Java基本数据类型与表达式,分支循环. 2.String和StringBuffer的使用.正則表達式. 3.面向对象的抽象.封装,继承,多态.类与对象.对象初始化 ...
- CentOS 6 安装最新的 Redis 2.8 ,安装 TCMalloc
1,遇到的问题就是 redis 2.8 版本号依赖 Google 的 TCMalloc TCMalloc(Thread-Caching Malloc)是google开发的开源工具──"goo ...