Laravel 5 VueJS无法正常工作 [英] Laravel 5 VueJS not working

问题描述

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

I'm trying to use vuejs in my fresh laravel setup. I run the follwing commands in my command line

npm install
npm run dev

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

This commands runs without any errors. When I import the default VUE componet located under ~/ressources/assets/components/ExampleComponent.vue in my template nothing happends.

@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'
});

推荐答案

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

If you are using Laravel Mix check your webpack.mix.js file, default config must look like this

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

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

Now, look if you have linked JS file to you blade template

对于较旧的Laravel版本(< = 5.5)，看起来像这样:

Looks like this for older Laravel versions (<= 5.5):

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

并以此为新一次(> 5.5)

and like this for new once (> 5.5)

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

最后，看到你了

el: '#app'

它的意思是#-id，就像在CSS中一样，VueJS将搜索id为app的元素.该元素之外的所有内容都将无法正常工作.

it mean # - id, like in CSS, VueJS will search for element with id app. Everything outside that element will not work.

所以您必须像使用它

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

或

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

这篇关于Laravel 5 VueJS无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！