Question

我使用的是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>

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>

Answer 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',
});

vuejs组件不在我的laravel 5.3刀片页面中呈现

2 个答案: