vue工具

1. github官网下载vue工具:https://github.com/vuejs/vue-devtools。并解压

2.  在有package.json的文件夹下,按住shift右键,选择“在此处打开CLI”   执行 cnpm i  (没装镜像用  npm i)

vue-开发工具的安装_工具教程

 

3. node_modules安装完毕后,在命令行输入 cnpm run build (npm 也可以)

4. 打开谷歌浏览器,地址栏输入:chrome://extensions/  (找出扩展插件页面)

vue-开发工具的安装_开发工具_02

 

5. 选中 “开发者模式”

vue-开发工具的安装_vue_03

 

6. 把刚才插件文件夹下 shells下的chrome直接拖过来,拖到 谷歌浏览器 的  扩展程序  页面,

 vue-开发工具的安装_开发工具_04vue-开发工具的安装_工具教程_05

 

 

安装完毕

谷歌浏览器右上角也会有图标:

 

 vue-开发工具的安装_chrome_06

 

 

7. 在自己的vue项目下,跑一下vue的 npm run dev 后,复制命令行提示的地址

 vue-开发工具的安装_vue_07

 

8. 在谷歌中打开

 

9. F12打开开发者工具

 

10. 选择角落里的这个Vue,就可以使用了

 vue-开发工具的安装_工具教程_08

vue-开发工具的安装_工具教程_09

 

 

越努力,越幸运;阿门。