Laravel 5 VueJS无法正常工作

Question

我正在尝试在新的laravel设置中使用vuejs。我在命令行中运行以下命令

npm install
npm run dev

该命令运行无任何错误。当我导入位于~/ressources/assets/components/ExampleComponent.vue模板下的默认VUE组件时，没有任何反应。

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

这是app.js

require('./bootstrap');

window.Vue = require('vue');

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

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

Answer 1

如果您使用Laravel Mix检查webpack.mix.js文件，则默认配置必须如下所示

 mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

现在，查看是否已将JS文件链接到刀片模板

看起来像这样：

<script src="{{ asset('js/app.js') }}"></script>

最后，看到你有

el: '#app'

这意味着＃-id，就像在CSS中一样，VueJS将搜索id为app的元素。该元素之外的所有内容将无法正常工作。

所以你必须像

<div id='app'> 
<example-component></example-component>
</div>

要么

<section id='app'> 
    <example-component></example-component>
    </section>