我們?cè)陂_發(fā)vuey應(yīng)用的時(shí)候岖妄，避免不了vue-devtools及l(fā)aunch-editor的使用硝逢，本文只是自己對(duì)安裝這兩個(gè)工具的備忘藐俺，對(duì)于老鳥可能沒有什么價(jià)值兑燥，對(duì)于像我一樣的新手來說可能會(huì)有一些可以參考的地方。其實(shí)也沒有什么技術(shù)含量琴锭，基本是照搬官方教程晰甚，可能很多人和我一樣一看到英文就懵圈，其實(shí)仔細(xì)看看官方文檔基本都能使用决帖。話不多少說厕九，直接開魯。
一地回、vue-devtools安裝及使用
github地址：
https://github.com/vuejs/vue-devtools
1扁远、vue-devtools安裝。
方法一：
到瀏覽器對(duì)應(yīng)的插件商店直接下載安裝刻像，此方法比較簡(jiǎn)單畅买，沒有什么難度。（chrome插件商店國(guó)內(nèi)無(wú)法打開细睡，需要用方法進(jìn)行二安裝）
方法二：
需安裝git谷羞、node、npm或yarn（這兩個(gè)工具需要將倉(cāng)庫(kù)源指到像阿里之類的國(guó)內(nèi)倉(cāng)庫(kù)溜徙，否則有個(gè)別依賴包可能無(wú)法下載）
本文主要以yarn來構(gòu)建湃缎，此處就不列舉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）執(zhí)行以下命令安裝依賴包：
yarn install
幾個(gè)進(jìn)度條走完之后蠢壹，出現(xiàn)以下界面嗓违，依賴包就下載完成了。
3）執(zhí)行以下命令構(gòu)建項(xiàng)目
yarn run build
等待大概30秒图贸，出現(xiàn)以下界面就算構(gòu)建完成了蹂季，至此冕广，就可以到瀏覽器安裝插件了。
4）以chrome為例安裝瀏覽器插件
a）打開chrome“設(shè)置”
b) 單擊左側(cè)“擴(kuò)展程序”
c)單擊“加載已解壓的擴(kuò)展程序”
d) 選擇項(xiàng)目下的 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上已經(jīng)有比較詳細(xì)的說明文檔何吝，這里只是簡(jiǎn)單描述。
使用步驟：
1）使用npm或yarn將launch-editor添加到項(xiàng)目鹃唯，
2）在項(xiàng)目中配置launch-editor爱榕，以下以Vue CLI 3 Webpack為例。
在項(xiàng)目vue.config.js文件添加
const openInEditor = require('launch-editor-middleware')
module.exports = {
devServer: {
before (app) {
// 指定在那種編輯器中打開組件
app.use('/__open-in-editor', openInEditor('idea'))
}
}
}
以下是支持的軟件及配置標(biāo)識(shí)
launch-editor配置就這么簡(jiǎn)單坡慌，在瀏覽器調(diào)試窗口選擇組件并點(diǎn)擊“open in editor”就可以在對(duì)應(yīng)的編輯器中打開組件了黔酥。
