背景
尤雨溪在2020年9月19日晚正式發(fā)布vue3.0 one piece。此版本相較于vue2版本，更快、更小、更易維護(hù)、更易于原生、讓開發(fā)者更輕松；所以學(xué)習(xí)vue3，對于一個(gè)前端開發(fā)者來說是一個(gè)刻不容緩的學(xué)習(xí)趨勢。
學(xué)習(xí)vue3自然也離不開debug啦~~
Vue官方發(fā)布了調(diào)試工具Vue-Devtools。
VUE3的Vue-Devtools目前還不能像VUE2的Vue-Devtools那樣，通過命令（npm install vue-devtools）進(jìn)行安裝。
VUE3 devtools安裝
1.下載VUE3 devtools（https://gitee.com/h5web/devtools-6.0.0-beta.15）
2.下載后，解壓文件，并通過VScode打開文件，打開新終端，依次輸入命令
- yarn install
- yarn run build
3.打開chrome瀏覽器 --> 點(diǎn)擊右上角“三點(diǎn)菜單欄” --> 更多工具 --> 擴(kuò)展程序 --> 打開“開發(fā)者模式” --> 加載已解壓的擴(kuò)展程序
加載已解壓的擴(kuò)展程序 選中 這個(gè)文件
4.將擴(kuò)展程序固定在頂部
5.當(dāng)你打開一個(gè)vue的頁面，vue的圖標(biāo)就會亮起來。這時(shí)你就成功了1.大半。
但是，如果你打開F12時(shí)，缺少了這個(gè)vue的話，你就還沒完全成功。
那么，我們該怎么辦呢?
① 打開詳情，檢查是否已打開“允許訪問文件網(wǎng)址”
②給你的vue3項(xiàng)目的main.js加上這一句
app.config.devtools = true
文章來源：http://www.zghlxwxcb.cn/news/detail-448657.html
6.最后 你就成功了~。!文章來源地址http://www.zghlxwxcb.cn/news/detail-448657.html
到了這里，關(guān)于【前端開發(fā)工具】VUE3 devtools安裝的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
