Google Chrome安装Vue devtools

最新推荐文章于 2025-03-25 10:00:10 发布

敲代码泡妹可能吗

最新推荐文章于 2025-03-25 10:00:10 发布

阅读量225

点赞数

分类专栏： vue.js vue devtools 文章标签： vue chrome

本文链接：https://blog.youkuaiyun.com/zsf_993113/article/details/107474257

版权

vue.js 同时被 2 个专栏收录

1 篇文章

订阅专栏

vue devtools

1 篇文章

订阅专栏

本文介绍了在Google Chrome浏览器中安装Vue devtools的步骤，以方便Vue项目的调试。首先，强调Vue的核心库专注于视图层，易于学习且易于与其他库集成。接着，提供了Vue devtools的下载链接及提取码。用户需要将下载的文件拖入浏览器的拓展程序管理页面，并开启允许访问文件网址的选项。最后，通过打开HTML文件进行测试以确保Vue devtools正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

开放调试需要安装Vue devtools插件

下载ok

链接：https://pan.baidu.com/s/11rkNMiTUtqNITBI2bPxPcA
提取码：NIHA

打开浏览器→设置→拓展程序把刚才下载的拖进去

管理拓展程序允许访问文件网址

打开html,测试

代码

<!DOCTYPE html>
<html>
<title>this is vue.js project</title>
<!--下载vue.js文件放在html页面一起-->
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<h1 id="job" name="app">{{message}}</h1> 
</body>
<script>
    new Vue({
	    el: '#job',
	    data:{
		    message: 'hello world vue.js'
	    }
    })
</script>
</html>