码迷,mamicode.com
首页 > 其他好文 > 详细

Vue调试神器vue-devtools 的安装

时间:2019-05-16 17:58:48      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:image   令行   fill   pen   解压   war   ...   gpe   依赖   

Vue调试神器vue-devtools 的安装

问题:为什么要安装该插件: 
答案 :因为vue是进行数据驱动的,仅仅从chrome浏览器的控制台进行element查看,是看不到数据的动向的。

未安装的情形:

技术图片

浏览器的控制台会提示你:

安装前的准备

  • 因为安装依赖需要Node.js环境。所以,第一件事就是安装Node.js
  • 安装完成之后,从github的下载地址将该插件下载下来:https://github.com/vuejs/vue-devtools

win系统下nodejs安装及环境配置 - CSDN博客

安装步骤

  • 下载之后,解压文件,然后复制粘贴解压的文件,放在某个盘的某个文件夹下面。我的(D:\vue-devtools-dev)
  • 然后通过Windows+R这个快捷键打开“运行”对话框,输入cmd,进入命令行。
  • 在命令行内,进入到vue-devtools-master目录下。
  • 先执行npm install命令;(执行过程比较长,请耐心等待...)
  • 执行成功后,再执行npm run build命令;
  • 这两个命令都执行成功,就可以关闭命令行了。
  • 然后进入C:\Software\vue-devtools-master\shells\chrome目录下,修改mainifest.json 文件中的persistent属性的值为true。(根据自己安装的目录去找mainifest.json 文件)
  • 打开谷歌浏览器 —— 点击右上角纵向排列的三个点选项 —— 更多工具 —— 右上角勾选开发者模式(有的已默认勾选了)—— 加载已解压的扩展程序 —— 找到本地磁盘中vue-devtools-master目录下的chrome文件夹 —— 选择该文件夹并点击确定按钮。

后来才发现,其实安装过程存在进度条的,进度条其实就是图中的#号。(如下图所示)

1.执行npm install命令

技术图片

2.执行npm run build命令

技术图片

3.修改mainifest.json 文件

技术图片

技术图片

4.打开谷歌浏览器,设置开发者模式,添加扩展程序文件

技术图片

至此,恭喜vue devtools插件已经安装成功!!

注:Vue.js devtools插件在chrome浏览器安装成功后,在浏览器的右上角会存在一个插件图标。

5.启动vue devtools插件

6.打开vue项目,在控制台选择vue

技术图片

7.点击vue,查看数据

技术图片

可能会遇到的问题

1.在命令行执行npm install时,会长时间停留在fetchMetadata

2.npm install 获取 fetchMetadata 的阶段非常慢,有什么方法可以加速呢?

3.Vue.js devtool插件安装后无法使用,出现提示“vue.js not detected”的解决办法

 
 
转自: https://blog.csdn.net/tom0915/article/details/80431335
 
 
 
验证:vue-devtools插件是否按照成功:
技术图片

 技术图片

 

Vue调试神器vue-devtools 的安装

标签:image   令行   fill   pen   解压   war   ...   gpe   依赖   

原文地址:https://www.cnblogs.com/JAVA-STUDYER/p/10876826.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!