一，安裝yarn

1,安裝yarn

root@lhdpc:~# npm install -g yarn
 
> yarn@1.22.10 preinstall /usr/local/soft/node-v14.17.1-linux-x64/lib/node_modules/yarn
> :; (node ./preinstall.js > /dev/null 2>&1 || true)
 
/usr/local/soft/node-v14.17.1-linux-x64/bin/yarn -> /usr/local/soft/node-v14.17.1-linux-x64/lib/node_modules/yarn/bin/yarn.js
 
/usr/local/soft/node-v14.17.1-linux-x64/bin/yarnpkg -> /usr/local/soft/node-v14.17.1-linux-x64/lib/node_modules/yarn/bin/yarn.js
+ yarn@1.22.10
added 1 package in 4.019s

2，建立符號連結:

root@lhdpc:~# ln -s /usr/local/soft/node-v14.17.1-linux-x64/bin/yarn /usr/local/bin/yarn

3,檢視版本:

root@lhdpc:~# yarn --version
1.22.10

說明：安裝新版本的vue-devtools時需要用到yarn

說明：劉巨集締的架構森林是一個專注架構的部落格，地址：

https://www.cnblogs.com/architectforest

對應的原始碼可以訪問這裡獲取：https://github.com/liuhongdi/

說明：作者:劉巨集締 郵箱: [email protected]

二，下載vue-devtools程式碼:

程式碼地址:

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

如圖: 點選code按鈕，選擇 Download Zip

三，安裝vue-devtools:

解壓:

liuhongdi@lhdpc:~/soft/vuedevtools$ unzip vue-devtools-next.zip

進行yarn設定

liuhongdi@lhdpc:~/soft/vuedevtools/vue-devtools-next$ vi
 
 /home/liuhongdi/.yarnrc

內容:

egistry "https://registry.npm.taobao.org"
electron_mirror "https://npm.taobao.org/mirrors/electron/"
lastUpdateCheck 1624256645697

把lastUpdateCheck一行刪除 說明：不刪除可能會導致yarn在安裝依賴包時停住不動 安裝依賴

liuhongdi@lhdpc:~/soft/vuedevtools$ cd vue-devtools-next/
liuhongdi@lhdpc:~/soft/vuedevtools/vue-devtools-next$ yarn install

執行build

liuhongdi@lhdpc:~/soft/vuedevtools/vue-devtools-next$ yarn run build

安裝到瀏覽器: 開啟chrome,選單->更多工具->擴充套件程式 然後開啟右上角的開發者模式：如圖: 點選:載入已解壓的擴充套件程式: 選中vue-devtools/packages/shell-chrome/目錄 然後如圖:

四，測試效果:

在瀏覽器中開啟我們建立的vue.js站點， 可以看到外掛vuedevtools的icon已被點亮， 如圖: 開啟開發者工具: 開啟vue的面板，可以看到app下的component 如圖:

五，檢視chrome的版本: