- Vue.js從入門到項目實踐(超值版)
- 聚慕課教育研發中心編著
- 370字
- 2022-07-29 14:27:30
2.1 安裝Vue Devtools

在使用Vue前端框架前,推薦在瀏覽器(如Google Chrome)上安裝Vue Devtools。它可以讓開發者在一個友好的界面中審查和調試Vue應用程序。如果能訪問國外網站的讀者,可以直接訪問Google Web Store,在搜索欄中搜索vuejs-devtools進行安裝。如果不能訪問國外網站的讀者,可以進行手動下載Vue Devtools并安裝。具體操作步驟如下。
(1)在github上下載Vue Devtools壓縮包,如圖2-1所示。

圖2-1 下載Vue Devtools
(2)下載完成后進入vue-devtools(見圖2-2),執行以下命令,安裝構建工具所需要的依賴。

圖2-2 執行cnpm install等命令
cnpm install npm run build
(3)安裝成功后,打開Google Chrome的擴展程序菜單,如圖2-3所示。

圖2-3 Google Chrome的擴展程序菜單
(4)打開Google Chrome的擴展程序后,單擊右上角的“開發者模式”,并單擊“加載已解壓的擴展程序”,選擇shells下的chrome文件夾進行安裝,如圖2-4所示。

圖2-4 安裝Vue Devtools
(5)再次打開Vue項目時,就可以在Chrome調試工具中通過Vue Devtools查看組件的狀態,如圖2-5所示。

圖2-5 使用Vue Devtools查看組件的狀態
推薦閱讀
- JSP網站開發詳解
- Dreamweaver CS5+ASP動態網站設計實用手冊
- Web前端開發精品課 HTML與CSS進階教程
- 速學速通:快學Flash網頁動畫
- 中文版Dreamweaver CC+Flash CC+Photoshop CC網頁設計實戰視頻教程
- 人人都玩開心網:Ext JS+Android+SSH整合開發Web與移動SNS
- 電子商務網頁設計(第二版)
- Highcharts網頁圖表制作實例詳解 (Web開發典藏大系)
- 從零開始讀懂Web3
- Dreamweaver CS3網頁制作
- Dreamweaver CS3網站制作炫例精講
- 網頁設計綜合實踐教程
- 網頁設計與開發
- 精通HTML 5+CSS 3:100%網頁設計與布局密碼
- 眾妙之門:JavaScript與jQuery技術精粹