我在 Vuejs 中的组件没有在我的 Blade 视图中呈现

Question

我的 Vuejs 组件没有在我的刀片视图中呈现。我究竟做错了什么？

我的组件被称为“星级”。

刀片视图

<div class="container">
<div class="row">
    <div class="col-md-4">
        **<star-rating></star-rating>**
    </div>
    <div class="col-md-4">
        Rating - statistics
    </div>
    <div class="col-md-4">
        @if(auth()->check())
            <form method="post" action="{{ route('review.store') }}">
                {{ csrf_field() }}
                <h5>Form title</h5> 

                <div class="form-group">
                    <label for="headline"><strong>Headline</strong></label>
                    <input type="text" class="form-control" name="headline" id="headline" placeholder="Review title">
                </div>
                <div class="form-group">
                    <label for="headline"><strong>Rating</strong></label>
                    <input type="text" class="form-control" name="rating" id="rating" placeholder="A number from 1 - 5">
                </div>
                <div class="form-group">
                    <label for="headline"><strong>Description</strong></label>
                    <input type="text" class="form-control" name="description" id="description" placeholder="Tell us about your experience">
                </div>

                <input type="hidden" name="product_id" value="{{ $product->id }}">

                <button class="btn btn-primary" type="submit">Save</button>
            </form>
        @else
            <a href="/login" class="btn btn-primary" role="button">Write a review</a>
        @endif
    </div>
   </div>
 </div>
 <div class="container">
 <div class="row">
    <div class="col-md-6">
       <ul>
            @forelse($product->reviews as $review)
            <li>{{ $review->headline }}</li>
            @empty
                <h6>There are not reviews for this product</h6>
            @endforelse
       </ul>
    </div>
  </div>
</div>
@section('scripts')
  <script src="{{asset('js/app.js')}}"></script>
@endsection

在 Vuejs 中，我导入了用于创建评级系统的包。如果您想查看文档，这些是Star Rating System Vuejs

Vuejs 文件

import VueStarRating from 'vue-star-rating'

require('./bootstrap');

window.Vue = require('vue');


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

Vue.component('star-rating', VueStarRating);

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

我收到这两个错误：

1) [Vue 警告]：未知的自定义元素：- 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

2) 找不到 CSRF 令牌：https://laravel.com/docs/csrf#csrf-x-csrf-token

Answer 1

1) 确保您使用

编译您在 app.js 中编写的脚本

npm run watch

命令。

2) 我没有看到任何具有 #app id 的 div 元素。你是说我会用

来定位 #app 元素

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

但你没有。试着说一下：

<div class="container" id="app">

Answer 2

我的问题的解决方法分两步解决：

1) 运行：npm run dev

2) 运行：npm run watch

现在可以了