vue中devtools的安装使用

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插件啦。

前面介绍安装图形化vue项目,是因为我之前直接在Chrome应用商店中找到的devtools地址不对,安装后会有一些问题。

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

vue中devtools的安装使用

vue中devtools的安装使用

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

vue中devtools的安装使用