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>

Answer 2

我认为你应该使用id

包装容器div

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

如果不只是检查是否在php文件中正确导入了Js文件

Answer 3

大笑，这是一个面子问题。我从布局文件中删除了@yield('content')。对不起，坦克求助！

Answer 4

检查是否要导入app.js

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

Answer 5

我也遇到了这个问题，我的问题解决了。我不导入

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

检查是否要导入js/app.js和#app

它应该为您工作。

Laravel 5 VueJS无法正常工作

5 个答案: