vue的Devtools安裝詳情
1、http://www.cnplugins.com/網站上檢索vue，搜索結果中下載Devtools。
2、將下載文件的格式由.crx改為.rar或者.zip的壓縮格式
3、再將壓縮格式直接解壓，將文件放入C:\Users\17412\AppData\Local\Google\Chrome\User Data\Default\Extensions，這個是chrome擴展程序存放的位置，不放這里也沒關系,放到chorme安裝位置也是一個很好的選擇。
4、在chrome瀏覽器輸入地址chrome://extensions/，進入擴展程序管理中心，點擊開啟開發者模式，再點擊“加載已解壓的擴展程序”，選擇已經解壓好的文件。這樣就安裝好了。
5、很多人在檢驗安裝是否成功直接打開一些已經上線的vue項目，這樣是有問題的，因為上線的vue時生產版本的vue,是無法使用Devtools來調試，應該使用開發版本vue的來測試安裝是否成功
// 測試安裝是否成功代碼
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"></div> <script> var vm = new Vue({ el: '#app', data: {}, methods: {} }); </script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"></div> <script> var vm = new Vue({ el: '#app', data: {}, methods: {} }); </script> </body> </html>