vue-devtools安装与配置

 

1. 下载vue-devtools

首先打开网址https://github.com/vuejs/vue-devtools，如图1-1所示，点击“DOWNLOAD ZIP”，如果下载不了，打开网址https://desktop.github.com/，下载github客户端，在github客户端中下载。如图1-2所示，输入图1-1所中所示的vue-devtools的地址，点击“Create repository”下载。Github是SVN方式的源代码管理器，可以把下载的vue-devtools复制到其他盘，也可以在下载盘，以方便更新。

图 1‑1：下载vue-devtools

 

图 1‑2：在github客户端中下载vue-devtools

 

1. 安装vue-devtools

打开cmd命令行窗口，进入下载的vue-devtools-dev目录，如F:\vue-devtools-dev

1. 输入命令cnpm install（因为在淘宝 NPM 镜像下载的），如图2-1所示。

图 2‑1：cnpm install

1. npm run build，如图2-2，2-3所示

图 2‑2 npm run build

图 2‑3：npm run build完成

 

1. 配置vue-devtools

在google浏览器中打开“更多工具——扩展程序”中，如图3-1所示，选择开发者模式，点击“加载已安装的扩展程序”，选择vue-devtools-dev目录下的shells\chrome，如F:\vue-devtools-dev\shells\chrome。加载完成后如国资委3-2所示。

   

图 3‑1：加载vue-devtools

图 3‑2：加载vue-devtools完成

加载vue-devtools完成后，打开写好的vue文件，在右上角可以看到vue图标，如图3-3。

 

图 3‑3：打开html文件

点击“更多工具——开发者工具”，点击“”，选择“Vue” ,打开vue调试页面，如图3-4，3-5所示。

图 3‑4:打开Vue

图 3‑5：vue调试