编译安装Vue-devtools

安装Vue-devtool环境要求

• 安装环境要求node在6以上，npm在3以上
• 此教程测试使用的环境
  • Vue-devtools add-remote-devtools
  • npm 6.14.13
  • node v14.17.0 ## clone 或者下载
• clone和下载地址 github网址: https://github.com/vuejs/vue-devtools/tree/add-remote-devtools clone地址: https://github.com/vuejs/vue-devtools.git
• 若选择下载压缩包，先解压到需要的目录，建议修改文件夹名，此处我修改为vue-devtools

npm 编译

• 打开cmd，切换到vue-devtools目录下

• 输入npm install，回车执行

• 待执行完毕后输入npm run build，回车执行

Chrome 安装

• 打开谷歌浏览器->设置->更多工具->扩展程序
• 点击加载已解压的扩展程序
• 找到vue-devtools目录下的shells文件夹
• 选择shells文件夹中的Chrome文件夹
• 点击选择文件夹，安装成功

使用

• 打开cmd，切换到vue-devtools目录下
• 执行npm run dev
• 浏览器访问http://localhost:8080/
• 可查看vue实例
• 在使用vue编写的网页上，插件图标会亮起，点击可使用。

写在最后

• 通过此教程安装的Vue-devtools版本为Vue.js devtools 4.0.1，而Chrome网上应用商店下载安装的版本为Vue.js devtools 5.3.4，尝试编译Vue-devtools的next版本，但编译失败，此问题仍需解决。
• 待学习vue.js后将详细介绍Vue-devtools的使用。