vue入门教程(1):安装调试工具vue-devtools

快乐鱼儿 1年前 ⋅ 818 阅读

Vue.js devtools是一款用于调试Vue.js应用程序的Chrome和Firefox DevTools扩展,在浏览器中,可以边侧边栏窗格页面,边检查代码,方便实用。

本文主要介绍 vue的调试工具 vue-devtools 的安装和使用。

 

下载: 

https://github.com/vuejs/devtools

https://github.com/vuejs/devtools/releases/tag/v5.3.3

GitHub - vuejs/devtools at v5.1.1:https://github.com/vuejs/devtools/tree/v5.1.1

(本文介绍使用V5.1.1,其它高版本的搞了2天也没build成功,感觉坑比较大)

 

安装: 

在devtools目录下安装依赖包:

使用说明
1、下载压缩包

2、解压此文件夹

3、用命令提示符或编译器进入此文件夹

4、在文件夹下依次运行(可以在命令提示符窗口也可在编译器中):

   I、npm install安装所需要的依赖

   II、npm run build构建(如果未执行此步,shells->chrome文件夹下会缺少build文件夹)

5、在shells->chrome->manifest.json文件中修改 background 下 persistent 的值为 true

6、在chrome浏览器中找到设置->扩展程序,然后开启开发者模式,将插件中shells文件夹下的chrome文件夹直接拖到开启了开发模式的扩展程序页面,完成安装。


7、在插件文件目录下运行npm run dev,至此插件已成功安装,打开本地localhost:8080就可以看到插件成功安装并运行。

8、用chrome浏览器打开本地的其他项目,就可以看到浏览器已成功的安装了vue-devtools,可以用浏览器去调试vue项目啦。(此时不需要再在插件文件夹下运行npm run dev)

 

安装nodejs  npm:

1、安装node.js (为了用npm)

      下载:https://nodejs.org/dist/v9.7.1/
      查看是否安装成功命令行: node -v  和 npm -v

      

2、配置npm的全局模块的存放路径以及cache的路径,在NodeJS的主目录下,建立"node_global"及"node_cache"两个文件夹。

3、修改路径

npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

4、添加环境变量。

 

 

 

 

安装时参考资料:https://www.cnblogs.com/javahr/p/13226360.html

 

 

 


全部评论: 0

    我有话说: