相关代码:

https://github.com/WozHuang/Barrage-helper/blob/master/src/main/index.dev.js

在SPA逐渐成为构建优秀交互体验应用的主流方式后,使用Electron开发跨平台的软件是一个优秀的解决方案。下面简单介绍一下 Electron-vue 安装 vue-devtool的方式。

安装步骤

  1. 下载 vue-devtools.crx,把文件名后缀改成zip后解压放在工程目录下

(找不到或者懒得下可以直接克隆我的仓库后把这个文件夹给复制出来,我已经解压好放在里面了)

  1. 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文档中关于DevTool

为Electron 安装 vue-devtool等扩展的更多相关文章

  1. 【原】无脑操作:Chrome浏览器安装Vue.js devtool

    学习Vue.js时,Chrome浏览器安装Vue.js devtool能很方便的查看Vue对象.组件.事件等. 本文以Chrome浏览器插件Vue.js devtools_3.1.2_0.crx的安装 ...

  2. Vue devtool插件安装后无法使用,提示“vue.js not detected”的解决方法

    vue devtool下载 极简插件  github vue devtool安装 点击谷歌浏览器箭头所指图标-更多工具-扩展程序   ①:直接将后缀为crx的安装包拖进下图区域即可自动安装     ② ...

  3. 一、Electron + Webpack + Vue 搭建开发环境及打包安装

    目录 Webpack + Vue 搭建开发环境及打包安装 ------- 打包渲染进程 Electron + Webpack  搭建开发环境及打包安装 ------- 打包主进程 Electron + ...

  4. 二、Electron + Webpack + Vue 搭建开发环境及打包安装

    目录 Webpack + Vue 搭建开发环境及打包安装 ------- 打包渲染进程 Electron + Webpack  搭建开发环境及打包安装 ------- 打包主进程 Electron + ...

  5. Chrome安装Vue.js devtool F12无效

    要安装 vue-devtools-4.1.4_0 链接: https://pan.baidu.com/s/1aeUxKJEUDW0U_i6uuAZFvQ 提取码: 4btc vue-devtools- ...

  6. electron打包vue项目

    electron是什么 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并 ...

  7. chrome中安装Vue调试工具vue-devtools

    一.前言 vue-devtools是一款基于浏览器的插件,用来调试vue应用.本篇文章将要总结的是如何在chrome中安装Vue的调试工具vue-devtools. 首先能想到的第一种方法就是直接在c ...

  8. Electron安装过程深入解析(读完此文解决Electron应用无法启动,无法打包的问题)

    1. 安装Electron依赖包 开发者往往通过npm install(或 yarn add)指令完成为Node.js工程安装依赖包的工作, 安装Electron也不例外,下面是npm和yarn的安装 ...

  9. Vue安装Vue Devtools调试工具提示 Error: Cannot find module '@vue-devtools/build-tools' 解决办法

    我看网络上面安装Vue Devtools 调试工具的步骤几乎都是按照文章链接里的步骤进行安装, 但是在最终执行编译命令的时候 :npm run build ,提示如下错误: 尝试了很多方法,都不能解决 ...

  10. centos yum 安装 mongodb 以及php扩展

    centos yum 安装 mongodb 以及php扩展 投稿:hebedich 字体:[增加 减小] 类型:转载 MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用 ...

随机推荐

  1. 更新时间戳.txt

    UPDATE bbs2 INNER JOIN time1 ON bbs2.AnnounceID = time1.AnnounceID SET bbs2.asptime = time1.asptime

  2. Orcale-利用闪回恢复数据方法

    一.delete误删 方法1:如果表结构没有改变,直接闪回整个表,具体步骤: --首先需要表闪回权限,开启行移动功能 alter table 表名 enable row movement; --执行闪 ...

  3. FreeBSD的VIM基本配置

    实现的基本功能 中文解决乱码问题 鼠标右键原样粘贴 最后一次编辑文件后,鼠标位置的记忆 if v:lang =~ "utf8$" || v:lang =~ "UTF-8$ ...

  4. C++学习笔记(转)

    http://www.cnblogs.com/maowang1991/p/3290321.html 以下内容为自己一年多的C++学习心得,纯原创,转载请注明源地址. 一年多的C++学习过程中,自己阅读 ...

  5. phthon中的open函数模式

    原文地址:http://www.runoob.com/python/python-func-open.html r 以只读方式打开文件.文件的指针将会放在文件的开头.这是默认模式. rb 以二进制格式 ...

  6. 2015 Multi-University Training Contest 10 hdu 5411 CRB and Puzzle

    CRB and Puzzle Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)To ...

  7. telnet允许root用户登录

    默认情况下,linux不允许root用户以telnet方式登录linux主机,若要允许root用户登录,可采取以下3种方法之一:    1.修改login文件 redhat中对于远程登录的限制体现在/ ...

  8. rails create方法ActiveModel::ForbiddenAttribute的问题

    rails create方法ActiveModel::ForbiddenAttribute的问题 def create @ad = Ad.new(ad_params) @ad.save end pri ...

  9. sedna载入xml文件

    如果有一个xml文件a.xml.须要把它载入到sedna数据库xml_db里. sedna是通过se_term把xml载入到数据库的.有两种方法: 1.通过se_term的-query參数. se_t ...

  10. IOS开发教程--怎样使用点9图片

    事先准备一张图片: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA== ...