vue-devtools简单安装教程

最简单的方法：

• 直接到Google store下载
• 你也可以去网上找别人已经编译好的vue-devtools文件

当然你也可以跟我来一步一步编译生成vue-devtools工具

第一步：找到vue-devtools的github项目，并将其clone到本地. vue-devtools

git clone https://github.com/vuejs/vue-devtools.git

第二步：安装项目所需要的npm包
npm install //如果太慢的话，可以安装一个cnpm, 然后命令换成

cnpm install

第三步：编译项目文件

npm run build

一般有报错：

vue-devtools@5.3.3 build: `cd packages/shell-chrome && cross-env NODE_ENV=production webpack --progress --hi

不要慌，这是默认分支版本太新，一些功能未同步，
我们去github上下载5.1.1版本即可

https://github.com/vuejs/vue-devtools/tree/v5.1.1

下载下来解压，继续

cnpm i

依赖下载完毕，修改以下文件

然后

npm run build

第四步：添加至chrome游览器
游览器输入地址“chrome://extensions/”进入扩展程序页面，点击“加载已解压的扩展程序…”按钮，选择vue-devtools>shells下的chrome文件夹。

注：如果看不见“加载已解压的扩展程序…”按钮，则需要勾选“开发者模式”。