编写时间: 2018.7.4
Mac版本 10.13.3
Chrome 版本 67.0.3396.99
Node.js 版本 v10.4.1 (之前是 v6.11.2)
npm 版本 v3.10.10
根据网络文章 和 自己的操作整理.
具体查阅了哪些文章已无法一一说明, 在这里表示歉意和感谢.
手动安装方式
直接安装 Chrome 的 vue-devtools 插件无法启用. 所以才使用手动安装的方式.
第一步: 找到vue-devtools的github项目，并将其下载到本地
第二步: 将下载的项目文件放入 Chrome浏览器的插件文件夹中.
- 查看默认的 Chrome浏览器的插件文件夹
- 地址栏输入
chrome:version回车 - 用资源管理器打开
个人资料路径栏的路径,该路径下的Extensions文件夹即默认的扩展安装路径
- 地址栏输入
第三步: 进入目录, 安装所需npm依赖包，编译文件
如果npm下载太慢, 就换成cnpm 淘宝的镜像,
cnpm install
第四步: 打开Chrome 扩展程序页面, 开启 开发者模式
地址栏中输入 chrome://extensions/, 打开扩展程序页面.
页面右上角 开启开发者模式
第五步: 加载已解压的扩展程序
方法1: 将 vue-devtools-master/shells/chrome文件夹 拖入 Chrome 扩展程序页面 即可
方法2: 点击 页面上方的 加载已解压的扩展程序, 选择vue-devtools-master/shells/chrome文件夹 即可
第六步: 测试安装是否成功
使用 Chrome 浏览器打开一个引用了 Vue.js 的 页面, 再开启控制台, 就能看到 vue-devtools已经启用了.
注意: 没有引用 vue 的页面是不会启用的.
