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

Posted 2023-02-22

【中文标题】vuejs 组件未在我的 laravel 5.3 刀片页面中呈现

【英文标题】：vuejs component not rendering in my laravel 5.3 blade page

【发布时间】：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' );

【参考方案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',
);