目录

01.在谷歌浏览器安装Vue开发者工具

目录

01.在谷歌浏览器安装Vue开发者工具

1.在谷歌浏览器安装Vue开发者工具,在设置中找到扩展程序

https://i-blog.csdnimg.cn/blog_migrate/7db5518f68440c67c47c880c34aade4f.png https://i-blog.csdnimg.cn/blog_migrate/b3e05e35c2c4283f244d93d146f90315.png

点开,直接将插件拖拽到扩展程序页面 https://i-blog.csdnimg.cn/blog_migrate/4ec05491188734d7752f58d4578190e8.png

3.安装好以后可以测试html,右键运行

https://i-blog.csdnimg.cn/blog_migrate/ed069f3af7e8aad6c0843b15cc5109a3.png

4.在浏览器控制台输入Vue.config回车,会展示页面内容,安装完成

https://i-blog.csdnimg.cn/blog_migrate/d8b679a5546448ea46025cea476f62f9.png

现在在vscode写的vue代码可以运行了

https://i-blog.csdnimg.cn/blog_migrate/8ad5ca24e2d65d633dfe132e58304c5a.png

在扩展程序点击订书钉按钮,可以将vue固定,这个小V彩色时代表vue运行

F12可以看到报404,是因为页签图标不存在,shift+刷新(强制刷新)可以看到报的错误

https://i-blog.csdnimg.cn/blog_migrate/2777e392a5fb71672179534aedef017b.png

找个图片放到根目录下,重命名favicon.ico    关闭浏览器

https://i-blog.csdnimg.cn/blog_migrate/08efc942c1af45152c794ba64459051b.png https://i-blog.csdnimg.cn/blog_migrate/d48a897211b8dc365c06a2dfc3089cad.png

右键重新打开open…

https://i-blog.csdnimg.cn/blog_migrate/d8de55ccdc25eb556f7b6c8bd2f6d28b.png