安装即用Vue-Devtools安装配置教程(献给伸手党)

vue helloweb 次浏览 已收录 评论() 扫描二维码
扫描二维码

Vue-Devtools 安装太繁琐。就没有傻瓜一键安装的吗?必须有往下看~

小白新手福利

最简便的方法是用 FQ 来通过 google 应用商店进行安装,但是大多数人还是处在非 FQ 的状态。

尝试过安装 Node 的方法来安装,但是极其不建议用这个方法安装,非常麻烦,而且必须要有 node 的基础,非常不接地气。

下面来一个最简便的方法(送给伸手党):

查看过很多博客大多数都是,要安装 Vue-Devtools,在一个 github 下面用 git clone 或者手动下载一个叫做 vue-devtools-master 的文件。

然后呢,你就要用 npm 进行 install,然后再 npm install build。所以这意味着你又要去找 npm 来装,你会发现,最简便的方法就是下一个集成的 node.js。一番辛苦了之后,你就会发现 npm 安装好了之后,npm install build 又会出现一大串的问题。

请问哪有那么多时间去google,baidu这些问题?你要的只是简单的安装一个的调试工具,而你又不想 FQ。怎么破?

上GitHub,下载一个已经用 npm 处理过的 Devtools 源码,而且已经给你配置好了 manifest.json 和 webpack.config.js 文件,已经处理好了,拿来就用。啥也不说了,直接到我的 GitHub 上找:下载链接https://github.com/arcliang/Vue-Devtools-

下载来之后打开 google 浏览器,输入地址 chrome://extensions/ ,打开开发者模式,点击:加载已解压的扩展程序:

1.png

进入到Chrome文件夹下,点击确定:

2.png

我这里是把整个Vue-Devtools适配所有的浏览器源文件都安装了,而你只需要要chrome浏览器的源码就行,所以直接用我GitHub上的Chrome文件夹就行,点击确定

3.png

确定完了之后就会发现链接栏的右边有个V的标志,证明已经成功,但是此时会有很多人F12之后依然在调试界面看不到Vue,有可能是因为你写的程序引用的vue文件是一个vue.min.js文件,是个压缩文件,这个压缩文件是默认不支持调试的,具体怎么调支持调试就请自行baidu吧!这里只需要把你引入的文件的源码,编程Vue.js的就行,不要压缩版的。如果还不行,可以尝试下关闭浏览器再打开。

4.png

这样就已经安装调试成功了。



参考作者:https://blog.csdn.net/weixin_38654336/article/details/80790698

原文链接:HelloWeb前端网 » 安装即用Vue-Devtools安装配置教程(献给伸手党) » 感谢您的浏览,希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享