vue調(diào)試工具vue-devtools的安裝全過程
先導(dǎo)
vue-devtools是一款基于chrome瀏覽器的插件，用于vue應(yīng)用的調(diào)試，這款vue調(diào)試神器可以極大地提高我們的調(diào)試效率。
幫助我們快速的調(diào)試開發(fā)vue應(yīng)用。
第一步
我們可以先從github上找到vue-devtools的項目，下載到本地。下載vue-devtools鏈接。
克隆方法：git clone https://github.com/vuejs/vue-devtools.git
第二步
解壓下載好的文件，進入到vue-devtools目錄，安裝項目所需要的依賴包。
安裝方法：npm install 或者 cnpm install （注：cnpm命令是國內(nèi)的鏡像，速度會快一些）
第三步
編譯項目文件。
編譯方法：npm run build
第四步
修改安裝目錄vue-devtools\shells\chrome 中 的manifest.json文件。
persistent參數(shù)改為true，訪問協(xié)議是否包含：1.http://*/*; 2.https://*/*; 3.file:///*;這三種情況
第五步
添加至瀏覽器：
添加方法：在chrome瀏覽器輸入地址：“chrome://extensions/”進入擴展程序頁面，然后點擊“加載已解壓的擴展程序...”按鈕；選擇vue-devtools>shells目錄下的Chrome文件夾；還需允許文件地址是否訪問。
如果看不到“加載已解壓的擴展程序...”按鈕，先勾選“開發(fā)者模式”。
如下圖：
第六步
使用：
打開我們的vue應(yīng)用，打開調(diào)試，點擊vue擴展圖標，就可以使用了。
如下圖：
注：如果點擊vue擴展圖標還是提示：
Vue.jsis detectedonthis page. Open DevToolsand lookfor the Vue panel.
可以檢查下你是否使用的是壓縮版本的vue.min.js，使用vue.min.js默認為生產(chǎn)環(huán)境的，需要改為vue.js.結(jié)束。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了淺談Vue.use的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
Vue使用Echarts實現(xiàn)橫向柱狀圖,并通過WebSocket即時通訊更新
這篇文章主要介紹了Vue使用Echarts實現(xiàn)橫向柱狀圖,并通過WebSocket即時通訊更新方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
本篇文章主要介紹了使用vue-cli編寫vue插件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
我們知道ref可以用于創(chuàng)建一個響應(yīng)式數(shù)據(jù),而toRef也可以創(chuàng)建一個響應(yīng)式數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于Vue3中ref與toRef區(qū)別的相關(guān)資料,需要的朋友可以參考下2021-06-06
去除Element-Plus下拉菜單邊框的實現(xiàn)步驟
Element-Plus 是 Element UI 的 Vue 3 版本,它提供了一套完整的組件庫,在使用 Element-Plus 進行開發(fā)時,我們可能會遇到需要自定義組件樣式的情況,本文將介紹如何使用 CSS 來去除 Element-Plus 下拉框的邊框,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了在 Vue 中使用 JSX 及使用它的原因淺析，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了Vue 動態(tài)添加路由及生成菜單的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-06-06
vue3中require報錯require is not defined問題及解決
這篇文章主要介紹了vue3中require報錯require is not defined問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要給大家介紹了關(guān)于vue中如何實時監(jiān)聽div元素盒子的寬高的相關(guān)資料,在Vue中你可以使用Vue的計算屬性和偵聽器來動態(tài)監(jiān)測元素的高度,文中給出了簡單代碼示例,需要的朋友可以參考下2023-09-09
Vue實現(xiàn)Base64轉(zhuǎn)png、jpg圖片格式
這篇文章主要給大家介紹了關(guān)于Vue實現(xiàn)Base64轉(zhuǎn)png、jpg圖片格式的相關(guān)資料,前段獲取生成的是base64圖片,需要轉(zhuǎn)化為jpg,png,需要的朋友可以參考下2023-09-09