Google如何安裝調試Vue的神器vue-devtools ?
文章目錄
安裝介紹：
下面介紹一下該調試插件的下載&&安裝辦法：
demo實例 - 演示代碼:
首先，新建一個html文件，代碼隨意如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<p> {{message}} </p>
<my-component></my-component>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script>
Vue.component('my-component', {
template: '<p>hello VueComponent!</p>'
});
var app=new Vue({
el: '#app',
data: {
message: 'hello Vue.js!'
}
});
</script>
</body>
</html>
Google瀏覽器F12查看Console信息；
之後，按照下圖所示，點擊鏈接 https://github.com/vuejs/vue-devtools
接着會進入如下頁面：
找到上圖中所示的鏈接 Get the Chrome Extension (beta)，點擊後，進入下面的頁面：
點擊安裝之後，如上圖所示。
此時，就完成了插件的安裝了。
相關文章鏈接：
1. https://github.com/vuejs/vue-devtools
2. https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
3. 手動安裝教程
- 第一步： 找到vue-devtools的github項目，並將其clone到本地. vue-devtools
git clone https://github.com/vuejs/vue-devtools.git - 第二步： 安裝項目所需要的npm包
npm install //如果太慢的話，可以安裝一個cnpm, 然後命令換成 cnpm install - 第三步： 編譯項目文件
npm run build - 第四步： 添加至chrome遊覽器
遊覽器輸入地址“chrome://extensions/”進入擴展程序頁面，點擊“加載已解壓的擴展程序...”按鈕，選擇vue-devtools>shells下的chrome文件夾。
/**
*如果看不見“加載已解壓的擴展程序...”按鈕，則需要勾選“開發者模式”。
*/
以上就是關於“ Vue調試神器vue-devtools - 插件下載&&安裝 ” 的全部內容。