Vue.js Devtools擴展安裝與踩坑

来源:https://www.cnblogs.com/yangtao-s/archive/2022/05/09/16248329.html
-Advertisement-
Play Games

####一、前言 #####因為最近練習Vue3項目的時候,發現Chrome瀏覽器的devtools插件不起作用了,這才想起當前安裝的devtools是5版本的,而Vue3項目需要6版本才支持。 ####二、安裝 #####1. 在Github上搜索devtools項目,直達車 #####2. 找到 ...


一、前言

因為最近練習Vue3項目的時候,發現Chrome瀏覽器的devtools插件不起作用了,這才想起當前安裝的devtools是5版本的,而Vue3項目需要6版本才支持。

二、安裝

1. 在Github上搜索devtools項目,直達車

2. 找到devtools項目tags的6.0版本以上的的beta版本,下載到本地

3. 解壓後,用編輯器打開,因為這個項目是用yarn管理的,而我本地沒有安裝yarn,因此需要安裝yarn工具,如果不瞭解yarn的推薦看這裡

npm install -g yarn

4. 執行yarn install下載項目依賴,這裡如果不成功的話,推薦使用淘寶鏡像
5. 執行yarn run build打包項目,但是這裡報錯了

這是因為我用的windows,識別不了rm,在windows環境下要是用rimraf
因此需要安裝rimraf,參考npm包--rimraf:丫丫0721的博客

npm install rimraf --save-dev

安裝完成後,需要把所有的rm -rf替換成rimraf,只有兩個文件夾有,一個就是我們需要的packages\shell-chrome\package.json,另一個在packages\shell-electron\package.json
修改完成後在執行yarn run build,就可以打包成功了,這個時候packages\shell-chrome文件夾裡面會有一個build文件件,這就是我們打包好的文件
6. 打開Chrome瀏覽器的擴展程式,點擊載入已解壓的擴展程式,然後找到剛纔的shell-chrome文件夾並選擇它就可以了。


三、總結

因為以前Vue2的時候使用的擴展迷,這是個很好用的插件網站,要關註微信公眾號才能下載,並且還有使用教程。這次我主要是想嘗試一下自己打包編譯一下devtools工具,本以為會很順利,但沒想到還是踩坑了,並且在rm -rf這個錯誤上卡了很久,這裡非常感謝莫得感情學習機1號的博客:踩坑記6 vue3、生命周期鉤子、vue-devtools beta

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 在進行視頻通話過程中,用戶有時候會出現網路不好的情況,比如在進行多人視頻通話或者多人唱歌時,我們需要實時顯示用戶的網路質量。 ...
  • 本次上新,共計新增94個開源組件。組件涉及工具、網路、UI、圖形、音視頻等多種功能。 ...
  • 5月11日晚19:00,Hello HarmonyOS進階系列應用篇第二課《電腦視覺》直播如約而至。 ...
  • 隨著新技術的不斷演進,人工智慧已經廣泛地應用到教育、金融、物流、零售、交通、醫療等各個領域。而在AI高速發展的當下,高效開發變得更為重要,如何將創意想法與AI技術深度融合,迅速轉化為可落地的AI應用,是開發者在激烈競爭中制勝的關鍵。 為了助力開發者快速上線AI業務,為消費者提供創新AI體驗,HMS ...
  • 只有在ajax才能找回一點點主場了,vue中的ajax一天整完,內容還行,主要是對axios的運用。 明天按理說要開始vuex了,這個從來都是只耳聞沒有眼見過,明天來看看看看是個什麼神奇的東西。 一. 解決開發環境ajax跨域問題 1.配置代理(方法一) 首先我們能發起ajax請求的,xhr原生不推 ...
  • 大家好,我是半夏👴,一個剛剛開始寫文的沙雕程式員.如果喜歡我的文章,可以關註➕ 點贊 👍 加我微信:frontendpicker,一起學習交流前端,成為更優秀的工程師~關註公眾號:搞前端的半夏,瞭解更多前端知識! 點我探索新世界! 原文鏈接 ==>http://sylblog.xin/archi ...
  • 詳解JavaScript中的事件迴圈機制!!! 一、簡單講解 這個大家應該或多或少都知道的 for (var i = 0; i < 10; i++) { setTimeout(() => { console.log(i); // 輸出10個10 }); } 解析:先執行for迴圈,迴圈疊加i,然後再 ...
  • 前端周刊:2022-6 期 前端開發 videojs-plugin-marker--videojs 進度條打點插件 基於 videojs-marker-plugin 項目二次開發,支持 marker 點更新和 marker 點擊事件;更換構建工具為 Vite。 @cutting-mat/direct ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...