如何安装vue调试工具,vue调试工具安装

 时间:2026-02-16 02:55:10

1、vue调试工具安装

首先到网站上寻找vue-devtools下载

推荐到 github上面下载

cmd使用如下命令(前提是你要装有git):

git clone https://github.com/vuejs/vue-devtools

当然如果可以上google的话直接到应用商店下载

如何安装vue调试工具,vue调试工具安装

2、将下载的文件解压,进入到解文件夹vue-devtools的目录,安装项目所需要的依赖包。

安装方法:npm install  或  cnpm install 

(cnpm命令是国内的镜像,速度会快一些)

下图是编译过程

如何安装vue调试工具,vue调试工具安装

3、安装完成,如下所示,然后我们打开编译好的文件,编译过程报错的话,记得用npm清除缓存再试试

如何安装vue调试工具,vue调试工具安装

4、编译项目文件

npm run build

如下所示,代表已经编译成功

如何安装vue调试工具,vue调试工具安装

如何安装vue调试工具,vue调试工具安装

5、将编译好的组建添加到google浏览器,goole浏览器地址栏输入:chrome://extensions/ ,然后选择加载已解压的扩展程序,然后编译包目录下找到 chrome,点击确定,如下所示就是编译好的组建已安装

如何安装vue调试工具,vue调试工具安装

如何安装vue调试工具,vue调试工具安装

如何安装vue调试工具,vue调试工具安装

6、如果出现这个错误Vue.js is detected on this page. Open DevTools and look for the Vue panel. 可以修改如下图所示的地方为true,如果还不行 看看自己的js中是否引入vue的调试

如何安装vue调试工具,vue调试工具安装

7、vue-devtools 成功安装后的界面如下图所示

如何安装vue调试工具,vue调试工具安装

  • 抖店的产品很多,怎么分类保存呢
  • 无线手机淘宝主页首页视频添加方法
  • 抖音怎么进行企业认证
  • 淘宝pid怎么获得
  • 怎么查看淘宝联盟pid?
  • 热门搜索
    爱牙手抄报 关于重阳节的手抄报 交通规则手抄报 手抄报图片大全4年级 厉行节约手抄报 保护环境手抄报图片 读书节手抄报内容 感恩手抄报图片大全 关于母亲的手抄报 数学手抄报内容资料