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	✓	✓	✓

可參考官方文檔：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書籍等等），快來修煉全棧大佬高階秘笈。