一，安裝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/
說明：作者:劉宏締 郵箱: 371125307@qq.com
二，下載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的版本:
