vue3 devtools 安裝教程【已成功安裝】

vue3 devtools 安裝教程

vue devtools 工具使用起來很方便，之前的插件突然不能用了，便想着再安裝一下

過程1

於是，在官網 https://github.com/vuejs/devtools 下載了，然后執行以下步驟：

• 1.npm install
• 2.npm run build

結果是，報錯了，報錯信息如下：

	lerna notice cli v4.0.0
	lerna info Executing command in 9 packages: "yarn run build"
	lerna ERR! yarn run build exited 1 in '@vue/devtools-api'
	lerna ERR! yarn run build stdout:
	yarn run v1.22.18
	$ rimraf lib && yarn build:esm && yarn build:cjs
	$ tsc --module es2015 --outDir lib/esm -d
	info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

過程2

接着在網上找各種教程，參考了其中一篇，說是要安裝yarn，就執行了以下步驟：

• 1. 安裝 yarn 工具 $ npm install yarn -g
• 2. 用 yarn 安裝依賴 $ yarn install
• 3. 用 yarn 構建 $ yarn run build

然后還是報錯（電腦很卡，等了很久，快崩潰了......）

過程3

直接在網上下載了插件，安裝之后，刷新vue3項目頁面，圖標亮了，還是不能用，提示信息是：

Vue.js is detected on this page.
Devtools inspection is not available because it's in production mode or explicitly disabled by the author.

原因是處於生產模式，又開始找教程，要添加這行代碼：

Vue.config.devtools = true	

添加完之后，還是不起作用

過程4

接着繼續找各種教程，有說用5.1.1版本的（心想，這個應該不行吧...），抱着試試的心態，又試了試，這次沒有報錯，生成了shall文件夾，在Chrome插件中 點擊加載擴展程序，選擇shells->chrome,到vue3項目中刷新以下，圖標都不亮，看來還是不行...

過程5，這次終於安裝好了！！！

• 第一步，下載資源（資源文末領取，如鏈接失效，可以留言哦！），放到一個你想放的位置，解壓縮
  

• 第二步，打開Chrome瀏覽器，點擊右上角的三個點->更多工具->擴展程序（或者直接在瀏覽器中輸入chrome://extensions/）

• 第三步，打開右上角開發者模式開關（已打開請忽略），點擊加載已解壓的擴展程序，選擇解壓后的文件夾，就會出現插件圖標了，顯示6.0.0 beta 11這個版本（用於vue3，vue2也可以用）
  

• 第四步，點擊詳情，確保已啟用，並打開了允許訪問文件網址的開關
  

• 第五步，將插件圖標顯示在地址欄上，方便使用
  

• 第六步，到vue3項目，刷新一下，重新打開F12檢查頁面，vue插件圖標已經亮了，而且多了一個Vue的標簽欄，這樣vue devtools就安裝成功了，可以正常使用了
  

最后，附上資源：

鏈接：https://pan.baidu.com/s/1XIywhFvoYWZKAzSSbbpLgA
提取碼：2022

歡迎指正！