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扩展程序: