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

歡迎指正！