vue-devtools的安裝與使用

安裝 vue.js devtools 

vue官方中文文檔：http://www.uihtm.com/vue/v2/guide/index.html#

安裝 vue.js devtools 前提是Google瀏覽器已經安裝了谷歌訪問助手，能夠正常訪問到谷歌商店，沒有安裝的話，能夠去安裝下谷歌訪問助手，連接以下：

https://jingyan.baidu.com/article/63f236287f16c50208ab3d98.html

安裝好vue.js devtools，會出現一個小圖標，發現打開vue項目時，這個圖標是灰色的

提示：「vue.js not detected」

解決方法：

1.須要找到Google瀏覽器剛剛安裝vue.js devtools 插件的目錄，由於我是win7，win7路徑以下：C:\Users\用戶名\AppData\Local\Google\Chrome\User Data\Default\Extensions\nhdogjmejiglipccpnnnanhbledajbpd\5.1.0_0

2.參考：http://chromecj.com/utilities/2018-12/1653.html

修改以後，從新刷新以前打開的vue項目，

你會發現，報了一個這樣的錯：

Vue.js is detected on this page. Open DevTools and look for the Vue panel.

翻譯過來就是：在此頁上檢測到Vue.js，打開devtools並查找vue面板。

　　解決方法：在你的Vue項目的main.js中加入這段代碼：Vue.config.devtools = true

 

ctrl+s，再刷新Google瀏覽器，你會發現，F12多了一個Vue選項，打開這個選項，成了