前言

最近研究一下vue-devtools，感觉还蛮不错的,顺便尝试安装了一下。

vue-devtools是什么?

vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。

系统环境

vue-devtools如何安装?

第一种安装方法,考验自己的动手能力，对于我们开发来说，这都不是事儿，因为在安装成功的那一刻,有一种自豪的感觉。

1. 在github上把 vue-devtools 的项目下载到本地。或者用git 进行下载，指令$ git clone https://github.com/vuejs/vue-devtools.git ，前提是要安装git哦。我是直接下载的,没有使用git。
   
2. 把下载下来的vue-devtools-dev.zip包解压到 /media/stone/本地磁盘/SP(使用git不需要这一步)。
   
3. 在vue-devtools-dev目录下运行指令$ npm install 安装依赖包。(也可以使用cnpm 和yarn)。注意 不要出现error 就行啦!
   
   
4. 在vue-devtools-dev目录下运行指令$ npm run build 进行打包构建。(也可以使用cnpm 和yarn)
   注意:这里我问什么要用npm (cnpm/yarn) run build呢?这个请看我上篇博客中写的一片文章<<项目中利用npm生成package.json的那点事儿>>，在下载的文件中有个叫package.json的文件，我下面截图,看红色的部分都是运行指令:
   > 5.打开chrome浏览器,选择菜单下更多工具->扩展程序或者直接在浏览器中打开chrome://extensions/这个地址,回车!
   
   6.在chrome界面择点击加载已解压程序按钮, 选择 vue-devtools > shells > chrome 放入, 安装成功如下图
   
   成功之后出现
   
   重新启动浏览器,右边出现Vue的logo,并且颜色变亮
   
   接下来让我测试下吧,本地运行vue 项目出现下面的这样的,说明安装成功,让我们一起好好的调试代码吧!
   

第二种安装方法,很简单,在chrome的商城中搜vue-devtools,并安装,

注意:

1.vue必须引入开发版, 使用min压缩版是不能使用devtools进行调试的。
2.安装后, 需要关闭浏览器, 再重新打开, 才能使用。
3.第二种方法要借助翻墙软件和插件插件助手,网上一大堆。

如果实在不想折腾的朋友,请联系博主留言,博主直接把编译好的文件直接打包给你,这样直接添加即可!

欢迎进入个人公众号 ，一起学习啊！