【Vue Devtools 安装及使用】vue.js看着官方文档的从0开始瞎摸学习

终于开始了vue.js框架的学习，于是开始看官方文档自己瞎摸

因此，今天要解决的第一个问题就是安装 Vue Devtools

---

Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展，可以在浏览器开发者工具下调试代码。

接下来，就是安装方法啦！
1.首先在GitHub上下载devtools的源码。
先点击绿色的框框【Clone or download]】，然后带年纪弹框中的【Download Zip】下载。

2.下载好后进入vue-devtools-master工程 执行cnpm install, 下载依赖，然后执行npm run build，编译源程序。

3.然后修改shells、chrome目录下的mainifest.json 中的persistant为true

4.打开谷歌浏览器扩展程序，并勾选开发者模式

接着，将刚刚编译后的工程中的shells目录下，chrome的整个文件夹直接拖拽到当前浏览器中，并选择启用，即可将插件安装到浏览器。

5.打开一个已有的vue项目，运行项目，然后在浏览器中--->设置--->更多工具--->开发者工具，进入调试模式。发现vue.js is not detected ，可以调整一下webpack.config.js的代码，

接下来是自己遇到的一些小麻烦以及解决。

一番查询之后才发现原来是自己打的小demo里面<script>引用的是开发模式的

重新看了一遍官方文档

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

改成了这个(生产版本）就可以啦！

参考博客：https://www.cnblogs.com/tanyo...