Добавьте VueJS в Laravel, но продолжайте использовать маршрутизатор Laravel и т. Д.

Question

Я бы хотел добавить VueJS в свое многостраничное приложение на основе Laravel.

Что ж, Vue предлагает многое, но мне бы очень хотелось продолжить использовать механизм маршрутизации Laravel и добавить только VueJS для улучшения моего проекта.

Итак, мой вопрос: поскольку Laravel поставляется с app.js, включая базовые леса Vue, я не смогу добавить различные варианты поведения для разных страниц:

resources/assets/js/app.js

require('./bootstrap');

window.Vue = require('vue');


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

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

Так я прав, если бы я добавил только новые .js файлы для каждого блэйда? Например. home.js, register.js и включить их в мои представления?

Answer 1

Запись компонентов Vue

По умолчанию свежие приложения Laravel содержат компонент Vue ExampleComponent.vue, расположенный в каталоге resources / assets / js / components.Файл ExampleComponent.vue является примером отдельного файлового компонента Vue, который определяет свои JavaScript и HTML-шаблон в одном файле. Отдельные файловые компоненты обеспечивают очень удобный подход к созданию приложений, управляемых JavaScript .Пример компонента зарегистрирован в вашем app.js файле:

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

Чтобы использовать компонент в вашем приложении, вы можете поместить его в один из ваших HTML-шаблонов.Например, после запуска команды make: auth Artisan для создания экранов аутентификации и регистрации вашего приложения вы можете перетащить компонент в шаблон Blade home.blade.php:

@extends('layouts.app')

@section('content')
    <example-component></example-component>
@endsection