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

vue调试工具之 vue-devtools的安装

时间:2018-01-09 12:56:18      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:one   image   span   打包   git   应用商店   点击   style   git clone   

这里介绍一下vue-devtools的安装方法之一:

chrome浏览器的应用商店不能直接访问(需要跨域),所以直接应用商店安装的方法就行不通了。

 

1、到github主页去下载安装:

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

 

2、继续执行以下命令(cnpm国内镜像下载更快):

cd vue-devtools       //进入当前目录
cnpm install         //下载依赖
npm run build         //打包

  

3、进入chrome浏览器添加扩展程序:

  chrome浏览器>> 更多工具>> 扩展程序,进入下图页面:

    (1)勾选开发者模式

    (2)点击加载已解压的扩展程序(选择地址为:安装路径>> vue-devtools>>shells>>chrome),将chrome文件夹导入

    (3)点击确定就能安装成功

技术分享图片

 

4、安装成功的页面如下:

  技术分享图片

 

5、此时地址栏右侧出现vue的图标,在vue项目下图标变为亮色,切能够在开发者工具中进行vue的调试:技术分享图片

 

 

你安装成功了吗?快使用vue-devtools进行vue项目开发吧!

vue调试工具之 vue-devtools的安装

标签:one   image   span   打包   git   应用商店   点击   style   git clone   

原文地址:https://www.cnblogs.com/james23dong/p/8250797.html

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