组件未显示在 Vue DevTools 中 [英] Components not showing up in Vue DevTools
问题描述
有人遇到过这个问题吗?我正在使用 Vue Devtools，但由于没有显示任何组件，因此无法检查任何组件.没有根组件或任何东西.几乎只是一个空白的 DevTools.我是 Vue 的新手，所以我确定我错过了一些明显的东西.我正在使用 webpack cli 模板并且还没有实现任何 Vue Router 的东西.搜索组件时也没有任何结果.我假设它在这 3 个文件中?
main.js
从'vue'导入Vue从'./App'导入应用程序var db = firebase.database();var vm = new Vue({el: '#app',创建:函数(){//导入 Firebase 数据var quizzesRef = db.ref('测验');quizzesRef.on('value', function(snapshot) {控制台日志(快照.val())；vm.quizzes = 快照.val();});},数据:函数(){返回 {认证:假，测验:{}，资源: []}},模板:'<App/>',组件:{应用}})App.vue
<div id="应用程序"><导航栏></导航栏><资源信息></资源信息></模板><脚本>从'./components/Navbar'导入导航栏从 './components/ResourceInfo' 导入 ResourceInfo导出默认{名称:'应用'，成分: {导航栏，资源信息}}<风格></风格>
Index.html(省略标题)
<div id="app" class="container-fluid"></div><!-- 构建的文件将被自动注入--><脚本>//初始化 Firebase变量配置 = {apiKey: "",authDomain: "",数据库网址:"",存储桶:"",消息发送者 ID:"};firebase.initializeApp(config);我遇到了同样的问题，以下是为我解决的问题:
确保在 Chrome 扩展设置 (chrome://extensions) 中启用允许访问文件 URL.重新启动 Chrome.
打开 Vue DevTools 扩展，在页面上打开一个 Vue 组件后点击右上角的刷新按钮.
我希望这对某人有所帮助.
Has anyone experienced this problem? I'm using Vue Devtools but can't inspect any components on a count of none are showing up. No Root component or anything. Pretty much just a blank DevTools. I'm new to Vue so I'm sure I'm missing something obvious. I'm using the webpack cli template and haven't implemented any Vue Router stuff yet. Nothing comes up when searching for components either. I'm assuming it's something in these 3 files?
main.js
import Vue from 'vue'
import App from './App'
var db = firebase.database();
var vm = new Vue({
el: '#app',
created: function() {
// Import firebase data
var quizzesRef = db.ref('quizzes');
quizzesRef.on('value', function(snapshot) {
console.log(snapshot.val());
vm.quizzes = snapshot.val();
});
},
data: function() {
return {
authenticated: false,
quizzes: {},
resources: []
}
},
template: '<App/>',
components: { App }
})
App.vue
<template>
<div id="app">
<navbar></navbar>
<resource-info></resource-info>
</div>
</template>
<script>
import Navbar from './components/Navbar'
import ResourceInfo from './components/ResourceInfo'
export default {
name: 'app',
components: {
Navbar,
ResourceInfo
}
}
</script>
<style>
</style>
Index.html (Omitted header)
<body>
<div id="app" class="container-fluid"></div>
<!-- built files will be auto injected -->
<script>
// Initialize Firebase
var config = {
apiKey: "",
authDomain: "",
databaseURL: "",
storageBucket: "",
messagingSenderId: ""
};
firebase.initializeApp(config);
</script>
</body>
I had the same issue and here's what fixed it for me:
Ensure Allow access to file URLs in the chrome extension settings (chrome://extensions) is enabled. Restart Chrome.
Open the Vue DevTools extension and click the Refresh button on the top right after opening a Vue component on the page.
I hope this helps someone.
这篇关于组件未显示在 Vue DevTools 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
