在chrome浏览器中安装vue-Devtools工具

1、根据 此https://github.com/vuejs/vue-devtools 把项目下载到 本地；

2、Win + R 运行，cd到刚刚下载的vue-devtools项目地址后，

       进行 npm install 命令，完事儿后 再执行编译命令 npm run build；

3、打开下载vue-devtools项目的目录，找到E:\vue-devtools\shells\chrome\manifest.json中的代码：

 "background": {
    "scripts": [
      "build/background.js"
    ],
    "persistent": false
  },

      改为：

 "background": {
    "scripts": [
      "build/background.js"
    ],
    "persistent": true
  },

4、 打开谷歌浏览器：设置 >> 更多工具 >> 扩展程序，并把 开发者模式 按钮选为 选中状态，如图：

         

5、点击 加载已解压的扩展程序 按钮，然后去找文件夹 E:\vue-devtools\shells\chrome，如图：

         

      完成之后，页面右上角有一个灰色的vue的小图标；

6、找到E:\vue-devtools\shells\chrome\webpack.config.js中的代码：

          

     改为：

          

if (process.env.NODE_ENV === 'production') {
	module.exports.plugins = [
		new webpack.DefinePlugin({
			'process.env': {
				NODE_ENV: '"development"'
			}
		})
	]
}

7、 完成！！！ 如图：