Laravel 5 VueJS 不工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49088957/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Laravel 5 VueJS not working
提问by Markus
I'm trying to use vuejs in my fresh laravel setup. I run the follwing commands in my command line
我正在尝试在我的新 Laravel 设置中使用 vuejs。我在命令行中运行以下命令
npm install
npm run dev
This commands runs without any errors. When I import the default VUE componet located under ~/ressources/assets/components/ExampleComponent.vuein my template nothing happends.
此命令运行时没有任何错误。当我导入位于~/ressources/assets/components/ExampleComponent.vue模板下的默认 VUE 组件时，什么也没有发生。
@section('content')
<example-component></example-component>
@endsection
Here the app.js
这里的 app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
el: '#app'
});
回答by David Aghayan
If you are using Laravel Mix check your webpack.mix.js file, default config must look like this
如果你使用 Laravel Mix 检查你的 webpack.mix.js 文件，默认配置必须是这样的
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Now, look if you have linked JS file to you blade template
现在，看看您是否已将 JS 文件链接到刀片模板
Looks like this:
看起来像这样：
<script src="{{ asset('js/app.js') }}"></script>
Finally, see you have
最后，看看你有
el: '#app'
it mean # - id, like in CSS, VueJS will search for element with id app. Everything outside that element will not work.
它的意思是 # - id，就像在 CSS 中一样，VueJS 会搜索带有 id app 的元素。该元素之外的所有内容都将不起作用。
so you have to use it like
所以你必须像这样使用它
<div id='app'>
<example-component></example-component>
</div>
or
或者
<section id='app'>
<example-component></example-component>
</section>
回答by hamza
I think you should wrap the container div with an id of app
我认为你应该用 app 的 id 包装容器 div
<div id="app" > <example-component></example-component> </div>
if not just check if the Js files are properly imported in the php file
如果不只是检查 Js 文件是否正确导入到 php 文件中
回答by Markus
Lol, it was an faceplam question. I've removed the @yield('content')from the layout file. Sorry for that and tanks for help!
大声笑，这是一个faceplam问题。我已经@yield('content')从布局文件中删除了。对不起，坦克寻求帮助！
回答by Yonel yvan
check if you are importing app.js
检查您是否正在导入 app.js
<script src="{{ asset('js/app.js') }}" defer></script>
回答by Tarik Manoar
I also faced this problem and mine is solved. I'm not importing
我也遇到了这个问题，我的已经解决了。我不进口
<script src="{{ asset('js/app.js') }}" defer></script>
check that you are importing js/app.jsand #app
检查您是否正在导入js/app.js和#app
It should work for you.
它应该适合你。
