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

框架

浏览数:303

2019-7-7

终于开始了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…

作者:Kayee_呀