Larabel 5 VueJ가 작동하지 않음

Larabel 5 VueJ가 작동하지 않음

새 라벨 설정에서 Vuejs를 사용하려고 합니다.명령줄에서 다음 명령을 실행합니다.

npm install
npm run dev

이 명령어는 오류 없이 실행됩니다.다음 위치에 있는 기본 VUE 구성 요소를 가져올 때~/ressources/assets/components/ExampleComponent.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'
});

Laravel Mix를 사용하는 경우 webpack.mix.js 파일을 확인하십시오.기본 설정은 다음과 같습니다.

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

JS 파일을 블레이드 템플릿에 링크했는지 확인합니다.

이전 Larabel 버전(<= 5.5)의 경우 다음과 같습니다.

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

새로운 1회(> 5.5)에서는 이렇게 됩니다.

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

마지막으로, 당신은

el: '#app'

CSS와 같이 # - id를 의미하며, VueJS는 ID 앱으로 요소를 검색합니다.그 요소 밖에 있는 모든 것은 작동하지 않습니다.

그래서 이렇게 써야 돼요

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

또는

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

container div를 앱 아이디로 포장해야 할 것 같습니다.

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

Js파일이 php파일로 올바르게 Import 되어 있는지 여부를 체크하는 것뿐만 아니라

나도 이 문제에 직면했고 내 문제는 해결되었다.Import하지 않습니다.

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

Import 하는 것을 확인합니다.js/app.js그리고.#app

너한테 효과가 있을 거야.

Lol, 그건 뻔한 질문이었어.삭제했습니다.@yield('content')를 참조해 주세요.미안하고 탱크 좀 도와줘!

app.display를 가져오는지 확인합니다.

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

언급URL : https://stackoverflow.com/questions/49088957/laravel-5-vuejs-not-working