#vue.js
#vue.js
Вопрос:
Кто-нибудь сталкивался с этой проблемой? Я использую Vue Devtools, но не могу проверить какие-либо компоненты, поскольку ни один из них не отображается. Нет корневого компонента или чего-либо еще. В значительной степени просто пустой DevTools. Я новичок в Vue, поэтому уверен, что упускаю что-то очевидное. Я использую шаблон cli webpack и еще не внедрил никаких компонентов для маршрутизатора Vue. При поиске компонентов также ничего не появляется. Я предполагаю, что это что-то в этих 3 файлах?
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 (Пропущенный заголовок)
<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>
Комментарии:
1. Вы обслуживаете файлы с http-сервера, правильно? Vue DevTools не будет работать с обслуживанием на основе файлов.
2. Я использую
npm run dev.3. Какой браузер вы используете? Я получаю именно такое поведение в Vivaldi, но оно работает в обычном Chrome… Я публикую это как в группах vuedevtools, так и в группах Vivaldi…
Ответ №1:
У меня была такая же проблема, и вот что исправило ее для меня:
Убедитесь, что Allow access to file URLs в настройках расширения Chrome ( chrome://extensions ) включено. Перезапустите Chrome.
Откройте расширение Vue DevTools и нажмите кнопку Обновить в правом верхнем углу после открытия компонента Vue на странице.
Я надеюсь, что это кому-то поможет.
Комментарии:
1. Это фактически полностью сломало его для меня.
2. Спасибо! У меня это сработало отлично … и не нужно перезапускать Chrome, достаточно просто создать вкладку!
3. приятно …! Я не знаю причины, но это работает
Ответ №2:
Я вижу, что вы используете vue-cli , и я предполагаю, что он работает в режиме разработки ( npm run dev ).
Очевидно, что это не будет работать после того, как вы создадите производственное приложение, используя npm run build и обслуживая из dist папки.
Предполагая, что вы позаботились об этом выше, устанавливали ли вы Vue.js devtools недавно в Chrome? Если это так, вашему браузеру может потребоваться перезагрузка. Я думаю, что мне пришлось это сделать, когда я устанавливал Vue devtools в первый раз.
После всего этого вы должны начать просматривать свои компоненты на вкладке «Vue» инструментов разработчика. Для некоторых компонентов вы можете увидеть анонимный компонент, но все, что вам нужно, это то, name: app что вы уже делаете в своем компоненте App.vue.
Ответ №3:
У меня была такая же проблема! Не так много, чтобы обратиться за помощью, но у меня это сработало:
измените webpack.config.js настройка для NODE_ENV: ‘»производство»‘ на NODE_ENV: ‘»разработка»‘
Кажется почти слишком очевидным, но затем отрисованные приложения Vue появились как по волшебству, демонстрируя все достоинства объекта!