vuejs 组件未在我的 laravel 5.3 刀片页面中呈现答案

【问题标题】：vuejs component not rendering in my laravel 5.3 blade pagevuejs 组件未在我的 laravel 5.3 刀片页面中呈现
【发布时间】：2018-02-06 00:20:56
【问题描述】：

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

如果任何机构有解决方案，请提出建议。

我的 app-laravel.js 文件

require('./bootstrap');

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

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

我的刀片页面看起来像

  <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>

【问题讨论】：

你不能在body上挂载一个Vue实例。将所有内容放入<div id="app"> 并挂载到#app
即使我尝试过也无法正常工作
好吧，不管其他问题是什么，安装到body 肯定行不通
另外，使用vue.js 而不是vue.min.js，这样你会收到来自 Vue 的错误消息，这将有助于包含
我的 app-laravel.js 文件 const app = new Vue({ el: '#app' });

标签： php jquery vue.js laravel-5.3

【解决方案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>

【讨论】：

没有同样的问题。如果发现任何其他问题，请提出建议
抱歉，我没有在主布局文件中添加，现在可以正常工作了谢谢你们都

【解决方案2】：

需要先导入vue，这样写代码

//import vue
import Vue from 'vue';

//register component
Vue.component('yourComponentName',require('./components/yourComponentName.vue').default);

//initialize vue
const app = new Vue({
    el: '#app',
});

【讨论】：