Vue DevTools 安装和浏览器跳转到编辑器指定组件

Vue DevTools install and Open component in editor

1.在谷歌浏览器安装vue 插件

1.1下载vue插件

链接：https://pan.baidu.com/s/1m6V9rciS10yK-ob4oVrNpA 
提取码：plu2

1.2安装

安装流程：打开谷歌浏览器>设置>扩展程序>拖拽vue插件到扩展程序页面>添加扩展程序

拖拽vue插件到扩展程序页面，点击：添加扩展程序

安装成功

1.3使用vue 插件

在浏览器访问vue 项目，F12 打开调试窗口可以看到多了一个选项：vue

在此不详细讲解vue 插件怎么用，也不难自行摸索即可

重点讲解下：怎么实现浏览器跳转到编辑器（浏览器>VSCode)

2.浏览器跳转编辑器

vue 浏览器插件有个按钮用于打开编辑器：open in editor

本案例用的项目是vue cli（脚手架）自动生成的项目

现在来说下怎么搭建

2.1安装launch-editor-middleware

在VSCode 终端窗口中输入：npm install -d launch-editor-middleware

2.2配置webpack

const openInEditor = require('launch-editor-middleware')

    before(app) {
      /* 编辑器类型 webstorm code */
      app.use("/__open-in-editor", openInEditor("code"));
    },

支持的编辑器类型有很多，也可以同时配置多个编辑器（传编辑器数组即可）

openInEditor(["webstorm","code"])

Value	Editor	Linux	Windows	OSX
`appcode`	AppCode			✓
`atom`	Atom	✓	✓	✓
`atom-beta`	Atom Beta			✓
`brackets`	Brackets	✓	✓	✓
`clion`	Clion		✓	✓
`code`	Visual Studio Code	✓	✓	✓
`code-insiders`	Visual Studio Code Insiders	✓	✓	✓
`emacs`	Emacs	✓
`idea`	IDEA	✓	✓	✓
`notepad++`	Notepad++		✓
`pycharm`	PyCharm	✓	✓	✓
`phpstorm`	PhpStorm	✓	✓	✓
`rubymine`	RubyMine	✓	✓	✓
`sublime`	Sublime Text	✓	✓	✓
`vim`	Vim	✓
`visualstudio`	Visual Studio			✓
`webstorm`	WebStorm	✓	✓	✓