Vue调试神器vue-devtools - 插件下载&&安装

Google如何安装调试Vue的神器vue-devtools ?文章目录Google如何安装调试Vue的神器`vue-devtools` ?安装介绍：demo实例 - 演示代码:相关文章链接：1. https://github.com/vuejs/vue-devtools2. https://chrome.google.com/webstore/detail/vuejs-devtools/nh..

草巾冒小子

3578人浏览 · 2018-11-20 18:47:49

草巾冒小子 · 2018-11-20 18:47:49 发布

文章目录

Google如何安装调试Vue的神器`vue-devtools` ?

Google如何安装调试Vue的神器`vue-devtools` ?

安装介绍：

下面介绍一下该调试插件的下载&&安装办法：

demo实例 - 演示代码:

首先，新建一个html文件，代码随意如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<p> {{message}} </p>
			<my-component></my-component>
		</div>
	
		<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
		<script>
			Vue.component('my-component', {
				template: '<p>hello VueComponent!</p>'
			});
			var app=new Vue({
				el: '#app',
				data: {
					message: 'hello Vue.js!'
				}
			});
		</script>
	</body>
</html>

Google浏览器F12查看Console信息；
之后，按照下图所示，点击链接 https://github.com/vuejs/vue-devtools

testVue-devtools.html

接着会进入如下页面：

在这里插入图片描述

找到上图中所示的链接 Get the Chrome Extension (beta)，点击后，进入下面的页面：

在这里插入图片描述

点击安装之后，如上图所示。

此时，就完成了插件的安装了。

相关文章链接：

1. https://github.com/vuejs/vue-devtools

2. https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

3. 手动安装教程

Vue调试神器vue-devtools安装

第一步： 找到vue-devtools的github项目，并将其clone到本地. vue-devtools
git clone https://github.com/vuejs/vue-devtools.git
第二步： 安装项目所需要的npm包
npm install //如果太慢的话，可以安装一个cnpm, 然后命令换成 cnpm install
第三步： 编译项目文件
npm run build
第四步： 添加至chrome游览器

游览器输入地址“chrome://extensions/”进入扩展程序页面，点击“加载已解压的扩展程序...”按钮，选择vue-devtools>shells下的chrome文件夹。

/**
*如果看不见“加载已解压的扩展程序...”按钮，则需要勾选“开发者模式”。
*/

以上就是关于“ Vue调试神器vue-devtools - 插件下载&&安装 ” 的全部内容。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^