Chrome(谷歌浏览器)安装Vue插件vue-devtools(图文详细教程)

使用Vue开发项目时,常会用到一款谷歌浏览器插件,vue-devtools
安装成功后,运行本地Vue项目,打开浏览器控制台就如下:
其中可以便捷的查看vueX的数据以及组件结构等,非常方便,
Chrome(谷歌浏览器)安装Vue插件vue-devtools(图文详细教程)_第1张图片
安装步骤如下:
1、首先给大家提供一个git地址,虽然官网也有地址(https://github.com/vuejs/vue-devtools.git),我认为不太好用
给大家提供另一个git地址:

https://gitee.com/zhang_banglong/vue-devtools.git

打开里面就如下:
Chrome(谷歌浏览器)安装Vue插件vue-devtools(图文详细教程)_第2张图片

2、打开控制面板,进入到vue-devtools文件夹下,输入命令npm install或者cnpm install
Chrome(谷歌浏览器)安装Vue插件vue-devtools(图文详细教程)_第3张图片
3、上一步成功后,紧接着输入命令npm run build
Chrome(谷歌浏览器)安装Vue插件vue-devtools(图文详细教程)_第4张图片
4、打卡文件夹,找到shell文件夹,
Chrome(谷歌浏览器)安装Vue插件vue-devtools(图文详细教程)_第5张图片
5、打开shell文件夹,会找到一个chrome文件夹,就是它了!!!
Chrome(谷歌浏览器)安装Vue插件vue-devtools(图文详细教程)_第6张图片
6、打开谷歌浏览器(Chrome),找到扩展程序打开
Chrome(谷歌浏览器)安装Vue插件vue-devtools(图文详细教程)_第7张图片
7、选择“加载已解压的扩展程序”
Chrome(谷歌浏览器)安装Vue插件vue-devtools(图文详细教程)_第8张图片
8、选中刚才找到的chrome文件夹
Chrome(谷歌浏览器)安装Vue插件vue-devtools(图文详细教程)_第9张图片
9、选中后,“扩展程序”界面就如下,就完成了
Chrome(谷歌浏览器)安装Vue插件vue-devtools(图文详细教程)_第10张图片
10、本地运行一个Vue项目,F12打开控制台,如果没有,要刷新一下页面,或关闭浏览器重新打开
Chrome(谷歌浏览器)安装Vue插件vue-devtools(图文详细教程)_第11张图片其实同样的方法,找到其他浏览器的扩展程序,选择chrome文件夹,其他浏览器也可以同样出现vue-devtools

如果你比较着急,一时之间又弄不好拉下来的代码,可以考虑先安装个火狐浏览器,直接去扩展界面里搜索vue,点击添加即可
Chrome(谷歌浏览器)安装Vue插件vue-devtools(图文详细教程)_第12张图片

Chrome(谷歌浏览器)安装Vue插件vue-devtools(图文详细教程)_第13张图片

你可能感兴趣的:(前端,html,vue.js,chrome,github)