Vue组件未在Laravel 5.7中安装

时间:2018-12-27 20:05:49

标签: laravel vue.js

我知道这个问题已经问了一百万遍了,但是我还没有找到适合我的解决方案。我完全没有使用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>

任何帮助将不胜感激。

谢谢

0 个答案:

没有答案