window 安装chrome的vue插件

避免报错：找不到webpack

先安装webpack全局安装：

npm install webpack -g

npm install webpack-cli -g

1.下载vue-devtools插件 地址 https://github.com/vuejs/vue-devtools

2.解压vue-devtools-master 并双击打开 进入文件夹 

3.在该文件夹下运行cmd，若是cmd进入的地址不是文件夹所在地址

cd 进入解压的vue-devtools-master 所在的路径即可，例如我这里进入是c:\Users\shilei

所以要  cd Desktop\vue-devtools-master

在该目录下使用然后按照，npm install ，npm run build。一直不成功报错。所以采用yarn安装（确保先安装好yarn：

npm i yarn -g

-i：install

-g：全局安装（global）,使用 -g 或 --global

）

然后使用命令： yarn -version查看版本之后：yarn install 和 yarn run Build

修改文件：打开…\vue-devtools-dev\packages\shell-chrome文件夹。
找到manifest.json文件，修改persistent为true，保存文件。

打开谷歌浏览器扩展程序chrome://extensions/，将shell-chrome文件夹拖入（加载已解压的扩展程序，选中该目录），完成安装。（记得勾选右上角的开发者模式）

至此安装成功，运行程序后，在F12中可以看到console.....后边多了vue项

【备注】

yarn / yarn install 等同于npm install 批量安装依赖
yarn add xxx 等同于 npm install xxx —save 安装指定包到指定位置
yarn remove xxx 等同于 npm uninstall xxx —save 卸载指定包
yarn add xxx —dev 等同于 npm install xxx —save-dev
yarn upgrade 等同于 npm update 升级全部包
yarn global add xxx 等同于 npm install xxx -g 全局安装指定包

卸载yarn：npm uninstall yarn -g
yarn也是js包管理工具
yarn和npm的区别：https://blog.csdn.net/w345731923/article/details/82852459

【

可能遇到的问题

(1)Vue.js not detected
解决方法：
打开扩展程序，点击详细信息。勾选“启用”和“允许访问文件网址”，就可以了。

(2)右上角的Vue图标变亮，但是在开发者工具中没有出现Vue调试。
解决方法：
在项目入口文件（main.js）加上：Vue.config.devtools = true;

】

window 安装chrome的vue插件

可能遇到的问题

推荐阅读