vue-devtools及launch-editor调试工具安装及使用

我们在开发vuey应用的时候，避免不了vue-devtools及launch-editor的使用，本文只是自己对安装这两个工具的备忘，对于老鸟可能没有什么价值，对于像我一样的新手来说可能会有一些可以参考的地方。其实也没有什么技术含量，基本是照搬官方教程，可能很多人和我一样一看到英文就懵圈，其实仔细看看官方文档基本都能使用。话不多少说，直接开鲁。
一、vue-devtools安装及使用
github地址：

https://github.com/vuejs/vue-devtools

1、vue-devtools安装。
方法一：
到浏览器对应的插件商店直接下载安装，此方法比较简单，没有什么难度。（chrome插件商店国内无法打开，需要用方法进行二安装）
方法二：
需安装git、node、npm或yarn（这两个工具需要将仓库源指到像阿里之类的国内仓库，否则有个别依赖包可能无法下载）
本文主要以yarn来构建，此处就不列举npm方式，基本大同小异
yarn配置阿里源

yarn config set registry https://registry.npm.taobao.org
yarn config set sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"
yarn config set phantomjs_cdnurl "http://cnpmjs.org/downloads"
yarn config set electron_mirror "https://npm.taobao.org/mirrors/electron/"
yarn config set sqlite3_binary_host_mirror "https://foxgis.oss-cn-shanghai.aliyuncs.com/"
yarn config set profiler_binary_host_mirror "https://npm.taobao.org/mirrors/node-inspector/"
yarn config set chromedriver_cdnurl "https://cdn.npm.taobao.org/dist/chromedriver"

1）clone代码到本地

git clone https://github.com/vuejs/vue-devtools.git

2）执行以下命令安装依赖包：

yarn install

几个进度条走完之后，出现以下界面，依赖包就下载完成了。

依赖安装文成界面

3）执行以下命令构建项目

yarn run build

等待大概30秒，出现以下界面就算构建完成了，至此，就可以到浏览器安装插件了。

项目构建完成界面

4）以chrome为例安装浏览器插件
a）打开chrome“设置”

打开chrome设置界面

b) 单击左侧“扩展程序”

打开扩展程序窗口

c)单击“加载已解压的扩展程序”

加载已解压的扩展程序

d) 选择项目下的 vue-devtools\packages\shell-chrome 目录文件夹
至此，chrome插件就安装上了，可以开心的玩耍了，具体的使用方法在这里就不具体描述了。

扩展程序加载成功界面

二、launch-editor使用
launch-editor是在编辑器中打开组件的功能。
launch-editor github地址：

[https://github.com/yyx990803/launch-editor#middleware](https://github.com/yyx990803/launch-editor#middleware)

github上已经有比较详细的说明文档，这里只是简单描述。
使用步骤：
1）使用npm或yarn将launch-editor添加到项目，
2）在项目中配置launch-editor，以下以Vue CLI 3 Webpack为例。
在项目vue.config.js文件添加

const openInEditor = require('launch-editor-middleware')
module.exports = {
  devServer: {
    before (app) {
      // 指定在那种编辑器中打开组件
      app.use('/__open-in-editor', openInEditor('idea'))
    }
  } 
}

以下是支持的软件及配置标识

launch-editor支持软件及配置关键字

launch-editor配置就这么简单，在浏览器调试窗口选择组件并点击“open in editor”就可以在对应的编辑器中打开组件了。

l在编辑器中打开组件