php - vuejs 组件未在我的 laravel 5.3 Blade 页面中呈现

Question

我使用的是 laravel 5.3 和 vue 1.0.26 版本，它无法将组件加载到 Blade 页面中。它显示为空。我只是尝试使用给定的 laravel 示例组件。

如果有人有解决方案，请提出建议。

我的 app-laravel.js 文件

require('./bootstrap');

Vue.component('example', require('./components/Example.vue'));

const app = new Vue({
el: '#app'
});

我的 Blade 页面看起来像

  <div class="col-10 text-muted">
 <div id="app">
                <example></example>
 </div>

            </div>

我正在使用看起来像的 gulp

elixir(mix => {
mix.sass('app.scss', 'public/css/app.min.css')
.scripts([
    '../../../node_modules/jquery/dist/jquery.min.js',
    'libraries/datatables.responsive.js',
    'libraries/datatables.responsive.bootstrap4.js',
    '../../../node_modules/vue/dist/vue.min.js',
    'app.js',
], 'public/js/app.min.js');
});

我的 Example.vue 文件在这里

 <div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Example Component</div>

                <div class="panel-body">
                    I'm an example component!
                </div>
            </div>
        </div>
    </div>
</div>


<script>
 export default {
     ready() {
         console.log('Component ready.')
     }
 }
</script>

Answer 1

查看您的 Vue 组件文件后，尝试进行这些更改，看看您是否仍然遇到问题。

<template> <!-- First open a template tag -->
  <div class="container">
    <div class="row">

      <div class="col-md-8 col-md-offset-2">

        <div class="panel panel-default">
        <div class="panel-heading">Example Component</div>
          <div class="panel-body">
            I'm an example component!
          </div>
        </div>

      </div>

    </div>
  </div>
</template> <!-- Close template tag -->

<script>
  // Try using module.exports instead of export default
  module.exports = {

  }    
</script>