Question

所以我试图用Vue构建一个新的Laravel应用。由于某种原因，该应用程序附带的示例组件可以正常工作，但我自己没有。这是我的文件结构和代码：

视图/布局/vue.blade.php

<html>
<head>
<title>Skat</title>
</head>
<meta name="csrf-token" content="{{ csrf_token() }}">
<body>
    <div id="app">
        @yield("content")
    </div>
    <script src="/js/app.js"></script>
    </body>
</html>

resources / views / vue.blade.php ，一切正常！

@extends('layouts.vue')

@section('content')
    <example-component></example-component>
@endsection

资源/js/components/ExampleComponent.vue

<template>
    <div class="container">
        some stuff ..
    </div>
</template>

<script>
    export default {
      name: 'example-component',
      mounted() {
        console.log('Component mounted.')
      }
    }
</script>

resources / views / home.blade.php ，这不有效：（

@extends('layouts.vue')

@section('content')
    <home></home>
@endsection

资源/js/components/Home.vue

<template>
  <div class="container-fluid d-flex h-100 flex-column">
    test test
  </div> 
</template>

<script>
export default {
  name: 'home',
  components: {

  }
}
</script>

<style scoped>
...
</style>

routes / web.php

Route::get('/', function () {
    return view('vue');
});

Route::get('/home', function () {
    return view('home');
});

资源/js/app.js

...
import ExampleComponent from './components/ExampleComponent.vue';
import Home from './components/Home.vue';

const app = new Vue({
    el: '#app',
    components: {
      ExampleComponent,
      Home
    }
});

我没有收到任何错误或任何东西。我猜某个地方我没有正确设置它，但是我很困惑！谢谢！：）

Answer 1

请勿在根实例上使用components: {}。明确声明：

Vue.component('example-component', ExampleComponent).

更好。

const files = require.context('./', true, /\.vue$/i);
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));

Vue组件未在刀片文件中呈现

1 个答案: