Laravel по-русски

dmytrotus

Сообщений: 19

Как правильно работать с Vue.js в Laravel 5.8

Привет всем.
Как все знают Vue.Js установлен по дефолту в Laravel.

Я захожу в папку /resources/js/app.js и вижу там

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

const app = new Vue({
    el: '#app'
});

Дальше в welcome.blade вставляю этот компонент

<example-component></example-component>
<!-- need to put it before JQuery to let vuejs works -->
<script src="js/app.js"></script> 

Содержание этого examplecomponent.vue который находится по адресу прикрепляю

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Example Component mounted.') // эту строку я изменил
        }
    }
</script>

На первый взгляд все работает, так как через браузер выводится "I'm an example component."
Но в консоли выводится "Component mounted" вместо "Example Component mounted."
Кроме того я изменил название "examplecomponent.vue" на "example2222component.vue"
а все и дальше работает....
Впечатление что где то кешируется компонент и без толку что я что-то меняю.

Если я пытаюсь добавить еще один элемент .vue то ничего не работает.

Запускаю я свой проэкт не через

php artisan serve

А просто через OpenServer.
Кто с таким сталкивался, обьясните пожалуйста как правильно работать с теми элементами в Laravel....:|

dmytrotus

Сообщений: 19

Re: Как правильно работать с Vue.js в Laravel 5.8

Напишу как я добавляю еще один элемент .vue
Захожу в папку /resources/js/components/ и создаю файл myNewComponent.vue с содержанием

<template>
   I'm second Vue component
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('My new component mounted')
        }
    }
</script>

Дальше иду в файл /resources/js/app.js
И там дописываю

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

Vue.component('myNewComponent', require('./components/myNewComponent.vue').default); ///Тут обьявляю новый компонент

const app = new Vue({
    el: '#app'
});

Дальше в каком то view пишу
<div id="app">
<myNewComponent></myNewComponent>
</div>

<script src="js/app.js"></script>

И компонент не выводится...

Что я делаю не так?

vladislavTkachenko +51

Сообщений: 176

Re: Как правильно работать с Vue.js в Laravel 5.8

 I'm second Vue component
    </div>

1. там закрывается div какой-то. оно вероятно вообще не компилируется

Vue.component('example-component', 

2. В примере написано же, именование через черточку. не пишите CamelCase
3. Нужно запустить npm run watch или npm run dev чтоб ресурсы заново скомпилировались

Изменено vladislavTkachenko (17.06.2019 13:23:14)