我知道这个问题已经问了一百万遍了,但是我还没有找到适合我的解决方案。我完全没有使用Vue的经验,并且在运行npm audit fix
之后,似乎我的vue-template-compiler
已更新,迫使我更新了我的Vue软件包,两者都是"^2.5.21"
。这样做之后,我收到一条错误消息:
app.js:37130 [Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <ExampleComponent
我不确定我在做什么错了。我只在此处显示的示例组件中添加了一些内容:
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-xs-10 col-xs-offset-1 visible-md visible-lg">
<h5 id="quote"></h5>
<h6 id="author"></h6>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
const quote = document.getElementById("quote");
const author = document.getElementById("author");
let quoteArray = [
];
let authorArray = [
];
quote.innerHTML = "[ " + quoteBody + " ]";
author.innerHTML = "- " + quoteAuthor;
}
};
</script>
这是我的app.js
:
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
Vue.component('example-component', require('./components/ExampleComponent.vue'));
// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key)))
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
const app = new Vue({
el: '#app'
});
在这里我称呼Vue ExampleComponent
:
<div class="container-fluid">
<example-component></example-component>
任何帮助将不胜感激。
谢谢