javascript - 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 文件链接到你的 Blade 模板

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

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

像这样的新一次(> 5.5)

<script src="{{ mix('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>