vue中devtools的安装使用

离线安装：

vue-devtools地址   

1. Clone this repo     将vue-devtools代码克隆到本地：执行 git clone https://github.com/vuejs/vue-devtools.git
2. cd vue-devtools the newly created folder   
3. run yarn install   安装yarn后，执行yarn install（一定要用yarn安装,npm install安装的包不完整 ）
4. then run yarn run build  执行yarn run build 
5. Open the Chrome extension page (currently under Menu > More Tools > Extensions)
6. Check "developer mode" on the top-right corner
7. Click the "load unpacked" button on the left, and choose the folder: vue-devtools/packages/shell-chrome/
8. Alternatilvely to step 3, you can also use yarn dev:chrome to build & watch the unpacked extension

翻墙安装：

npm install -g @vue/cli   //安装最新版本的vue-cli脚手架 @vue/cli 3.0以上就可以 （@vue/cli 4.3.1）

vue -V //安装完成后，用这个命令可以查看到版本

执行vue ui 去创建图形化界面，一路按照界面选择根据需求就可以配置了。

配置完成后进入任务选项卡，右上角有个 devtools,点击会自动跳转到chrome插件的安装地址。

—————————————————分割线—————————————————————————

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd进入这个地址就可以安装vue devtools插件

添加插件到chrome后，还需要打开相应的选项：如下

最后，刷新chrome浏览器，在vue项目的页面中并打开开发者工具吗，就可以啦