Vue学习小札——1.2 vue-devtools的安装与使用

vue-devtools是一款基于chrome浏览器插件，用于vue应用的调试，极大地提高调试的效率。

下面来介绍如何安装和使用vue-devtools：

1.去github上clone vue-devtools项目 

git clone https://github.com/vuejs/vue-devtools.git复制代码

2.用npm 进入vue-devtools 目录下

 安装所需要的npm包    npm install  //如果太慢的话，可以安装一个cnpm, 然后命令换成 cnpm install

 编译项目文件    npm run build //没有执行这一步的话，项目文件夹shells>chrome文件夹里会少一个src文件

3.修改shells>chrome文件夹下的mainifest.json 中的persistant为true

4.浏览器输入“chrome://extensions/ " 进入扩展程序页面，选择“开发者模式”，点击”加载已解压的扩展程序..."按钮，选择vue-devtools>shells下的chrome的文件夹。

这样就安装成功了。

如果遇到"Vue.js is detected on this page. Open DevTools and look for the Vue panel."错误，把vue.min.js生产版本换成vue.js开发版本。

5.vue项目, 打开f12, 选择vue就可以使用了.

vue是数据驱动的, 这样就能看到对应数据了, 方便我们进行调试。