1. 引言
通过前面的章节，我们已经了解了Vue的开发要素以及前端的基础知识了，有兴趣的同学可以参阅下：
- 《Vue系列教程（01）- 前端发展史》
- 《Vue系列教程（02）- Vue环境搭建、项目创建及运行》
- 《Vue系列教程（03）- Vue开发利器VsCode》
- 《Vue系列教程（04）- VsCode断点调试》
- 《Vue系列教程（05）- 基础知识快速补充（html、css、js）》
在写第一个Vue程序之前，需要先安装好Vue的调试神器vue-devtools。
打包好的插件已上传到百度网盘，如果时间赶的童鞋，可以忽略本文章，直接下载插件：
2. 下载
下载地址：https://github.com/vuejs/vue-devtools
这里直接在控制台使用git下载，命令如下：
①.首先进入下载地址
$ cd /要下载的目录地址
②.克隆项目
$ git clone https://github.com/vuejs/vue-devtools
3. 安装
① 进入项目目录
$ cd vue-devtools/
② 切换到hide-inspect-button-outside-chrome-devtools-context分支
#切换到master $ git checkout hide-inspect-button-outside-chrome-devtools-context
② 安装（比较久需等待,如果是其它分支则会报错）
$ npm install $ npm run build # 安装过程可能会出现 # npm ERR! code ELIFECYCLE # npm ERR! errno 1 # npm ERR! vue-devtools@5.1.1 build: `cd shells/chrome && cross-env NODE_ENV=production webpack -- progress --hide-modules` # npm ERR! Exit status 1 # npm ERR! # npm ERR! Failed at the vue-devtools@5.1.1 build script. # npm ERR! This is probably not a problem with npm. There is likely additional logging output above. # npm WARN Local package.json exists, but node_modules missing, did you mean to install? # 这是没有生成node_modules这个文件,清空下缓存再重新安装就行 $ npm cache verify
4. 配置插件
① 配置插件,修改persistent为true
$ vim ./shells/chrome/manifest.json "background": { "scripts": [ "build/background.js" ], "persistent": true },
5. 添加插件
在Chrome浏览器添加插件工具:
加载已解压的扩展程序：
然后选择chrom文件夹：
安装成功：
6. 使用
跑一个vue程序，并在浏览器打开控制台，可以看到Vue扩展程序：
