Vue DevTools install andOpen 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"])

可參考官方文件：https://github.com/yyx990803/launch-editor#launch-editor

2.3確保VSCode 的bin目錄配置到環境變數PATH

Win + R 開啟cmd ，輸入：code -v

沒有配置的則需要找到VSCode 安裝目錄，然後將bin目錄配置到PATH

安裝流程在圖中，

Path 配在使用者變數或者系統變數都是可以的，

使用者變數指的是當前使用者可以使用（誰配置就誰使用，你不配那你就不配【狗頭】）

系統變數指的是不同使用者都可以使用

2.4測試瀏覽器跳轉到編輯器指定的元件

選中元件>點選跳轉按鈕

如果VSCode沒開啟，但看到VSCdoe 在閃，那也是打開了你選中的元件檔案了。

Vue DevTools讓開發vue 變得更加便捷，具體的使用還請自行探索。

關注公眾號，獲取更多學習資源（文章、PDF書籍等等），快來修煉全棧大佬高階祕笈。