Рубрики
Uncategorized

Как создавать приложения Vue на основе Laravel (I)

Автор оригинала: David Wong.

Использование Laravel позволяет элегантно создавать API-интерфейсы и идеально интегрировать их с одностраничным приложением Vue (SPA). В этом уроке мы покажем вам, как запускать и запускать маршрутизаторы Vue и серверную часть Laravel для создания SPA. Мы сосредоточимся на всех необходимых нам деталях, а затем в следующем уроке покажем вам, как использовать Laravel в качестве уровня API.

Как работает VueS PAr un:

  • Первый запрос поступает на серверный маршрутизатор Laravel
  • Laravel Делает Макет СПА-салона
  • Использование последующих запросов история.pushState API-интерфейсы переходят по URL-адресам без перезагрузки страниц

Маршрутизаторы Vue могут быть настроены Режим истории или Режим хэширования . по умолчанию Режим хэширования — Хэш URL-адреса используется для имитации полного URL-адреса, поэтому при изменении URL-адреса страница не перезагружается. Режим истории Эта модель в полной мере использует history.pushState API для завершения перехода по URL-адресу без перезагрузки страницы.

Здесь мы используем шаблоны история , поэтому нам нужно настроить маршрутизацию Laravel, которая соответствует всем возможным URL-адресам, в зависимости от маршрута пользователя в Vue SPA. Например, если пользователь обновит /привет Маршрутизацию, нам нужно будет сопоставить маршрут и вернуть шаблон приложения Vue SPA. Затем маршрутизатор Vue определяет маршрут и отображает соответствующие компоненты.

устанавливать

Сначала мы создаем новый проект Laravel, а затем устанавливаем пакет NPM маршрутизатора Vue:

laravel new vue-router
cd vue-router

# Link the project if you use Valet
valet link

# Install NPM dependencies and add vue-router
yarn install
yarn add vue-router # or npm install vue-router

Настройка маршрутизатора Vue

Здесь <просмотр маршрутизатора> Выход верхнего уровня отображает компоненты, соответствующие маршрутизации верхнего уровня. Аналогично, отрисованный компонент также может содержать свою собственную вложенность. <просмотр маршрутизатора> 。

Сначала мы обновим основные файлы JavaScript resources/assets/js/app.js И настройте маршрутизатор Vue. Заменить следующим app.js Содержание документа:

import Vue from 'vue'
Import VueRouter from'vue-router'// Import and install VueRouter plug-ins

Vue.use(VueRouter)

Import App from'. / views / App'// Components as App's Outermost Application Component
Import Hello from'. / views / Hello'// Import custom Hello components
Import Home from'. / views / Home'// Import custom Home components

// Construct a new instance of VueRouter with configuration objects
const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/hello',
            name: 'hello',
            component: Hello,
        },
    ],
});

const app = new Vue({
    el: '#app',
    components: { App },
    router,
});

Затем нам нужно создать несколько файлов, но сначала мы представим следующее. app.js :

  • Мы импортируем и устанавливаем Маршрутизатор Vue Подключаемый модуль Vue.use()

  • Мы импортировали три компонента Vue:

    • Действуйте как Приложение Компонент самого внешнего компонента приложения,
    • Один Привет Сопоставление с компонентами /привет
    • Один Главная Отображение на компоненты / главная
  • Давайте построим Маршрутизатор Vue Новые экземпляры с объектами конфигурации
  • Мы Приложение Передаем компоненты компонентам Атрибутам в конструкторе представления, чтобы Vue знал о компоненте
  • Мы будем маршрутизатор Постоянное внедрение в новое приложение Vue для доступа этот.$маршрутизатор и этот.$маршрут

это VueRouter Конструктор берет маршрут, путь, который мы определяем, имя (например, именованный маршрут Laravel) и сопоставляет его с массивом компонентов пути.

Мне нравится перемещать определение маршрутизации в отдельный модуль маршрутизации, который я импортировал, но для простоты мы определим маршрутизацию в главном файле приложения.

Чтобы Laravel mix успешно работал, нам нужно определить три компонента:

mkdir resources/assets/js/views
touch resources/assets/js/views/App.vue
touch resources/assets/js/views/Home.vue
touch resources/assets/js/views/Hello.vue

Во-первых, файлы App.vue являются самым внешним элементом контейнера нашего приложения. В этом компоненте мы будем использовать метки маршрутизатора Vue, определяющие названия приложений и некоторую навигацию:

Мы Подаем заявку Наиболее важными тегами в компоненте являются <просмотр маршрутизатора> маршрутизатора> Метка, наш маршрутизатор представит данный компонент, соответствующий пути (то есть Home или Привет ). маршрутизатора>

Следующий компонент, который нам нужно определить, находится в ресурсы/активы/js/представления/Home.vue :

Наконец, мы определяем Привет Компоненты, расположенные ниже ресурсы/активы/js/представления/Привет.vue :

Мне нравится отделять мои повторно используемые компоненты от компонентов, специфичных для представления, путем организации представлений в ресурсы/активы/js/представления Папки и мои действительно повторно используемые компоненты ресурсы/активы/js/компоненты . Это мое соглашение, и я нахожу, что оно хорошо работает, поэтому я могу легко разделить, какие компоненты можно использовать повторно, а какие-для конкретного представления.

Что касается интерфейса, у нас есть все необходимое для запуска приложений Vue! Затем нам нужно определить внутреннюю маршрутизацию и шаблоны на стороне сервера.

На стороне сервера

Мы используем платформы приложений, такие как Laravel и Vue SPA, чтобы создавать API на стороне сервера для использования наших приложений. Мы также можем использовать Blade для визуализации нашего приложения и предоставления конфигурации среды с помощью глобальных объектов JavaScript, что мне кажется удобным.

В этом уроке мы не собираемся создавать API, но мы продолжим. Эта статья посвящена подключению маршрутизаторов Vue.

Первое, что мы сделаем на стороне сервера, – это определим маршрутизацию. откройте файл маршрутизаторы/web. php и замените путь приветствия следующим:

[email protected]')->where('any', '.*');

Мы определяем всемогущий маршрут. Контроллер СПА Это означает, что любой сетевой маршрут будет сопоставлен с нашим СПА-салоном. Если мы этого не сделаем, и пользователь сделает запрос /привет Laravel ответит 404.

Далее нам нужно создать Spa-контроллер И определите представления:

php artisan make:controller SpaController

открыть Спа-контроллер И введите следующее:

Наконец, введите следующее resources/views/spa.blade.php :





    
    
    
    Vue SPA Demo

Мы определили #приложение Содержит Приложение Vue будет отображать необходимые элементы компонента и отображать соответствующий компонент на основе URL.

Запуск приложения

Этот фундамент используется для создания SPA с маршрутизаторами Vue и Vue. Нам нужно построить или JavaScript, чтобы протестировать его:

yarn watch # or npm run watch

Если вы загружаете приложение в браузере, вы должны увидеть следующее:

Первоначальный адрес: https://laravel-news.com/usin…

Читайте ещё по теме: