Рубрики
Uncategorized

Создайте одностраничное приложение Vue с помощью laravel (1)

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

Статья была переслана из профессионального сообщества разработчиков laravel. Оригинальная ссылка: https://learnku.com/laravel/t…

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

Основной процесс работы приложения Vie spa с laravel в качестве серверной части заключается в следующем:

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

Маршрутизатор Vue имеет два режима: режим истории и режим хэширования по умолчанию. Режим хэширования использует хэш URL-адреса для имитации полного URL-адреса, так что страницу не нужно перезагружать при изменении URL-адреса.

Здесь мы будем использовать режим истории, что означает, что нам нужно настроить путь laravel в соответствии с URL-адресом, который все пользователи могут вводить на странице spa. Например, если пользователь обновляет в браузере /привет Для этого маршрута, нам (laravel) необходимо сопоставить его и вернуть соответствующий шаблон Vue. Маршрутизатор Vue распознает маршрут и отобразит соответствующие компоненты страницы Vue.

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

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

laravel new vue-router
cd vue-router

#Establish project links when using Valet
valet link

#Install NPM dependency and add Vue router package
yarn install
yarn add vue-router # or npm install vue-router

Мы закончили Ларавель Установка проекта и vue-маршрутизатор Пакет готов, чтобы. Далее, настроить маршрут и определить серию маршрутов и компонентов.

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

Vue Маршрутизация выполняется для Vue Компонент определяет маршрут, а затем отображает его в следующих тегах приложения:

вид маршрутизатора Это в целом Vue В компоненте приложения. Давайте вернемся к ПРИЛОЖЕНИЮ Компоненту.

Во-первых, мы обновим наиболее важные JavaScript Документы resources/assets/js/app.js И конфигурация Через маршрут. взять app.js Замените содержимое следующим:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import App from './views/App'
import Hello from './views/Hello'
import Home from './views/Home'

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 подключаемого модуля

  • Мы импортируем три Vue Компонента:

    • Приложение Компонент (самый внешний компонент приложения)
    • Привет Сопоставление компонентов /привет Маршрутизация
    • Главная Сопоставление компонентов / Маршрутизация
  • Создайте новый Vue-маршрутизатор Объект для хранения конфигурации
  • С помощью Vue Метода построения Приложения Компонента давайте Vue узнаем Приложение сборку

  • Будет маршрутизатор Константа добавлена к этому Vue В приложении, через этот.$маршрутизатор И этот.$маршрут Называть

    VueRouter Конструктор содержит массив маршрутов, в котором определены путь, имя (аналогично именованному маршруту laravel) и компонент страницы, соответствующий пути.

В общем, я определю маршрут в отдельном модуле маршрутизации, а затем введу его в основной файл приложения. Но для простоты я буду напрямую использовать основной файл приложения( app.js )Эти маршруты определены в.

Для того, чтобы 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 Маршрутизатор Из Теги определяют “головку” и некоторую навигацию:

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

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

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

Я склонен отделять компонент повторного использования от компонента страницы, помещая компонент страницы в ресурсы/активы/js/представления В папку, поместите компонент повторного использования в папку ресурсы/активы/js/компоненты . Я обычно делаю это, потому что это позволяет мне легко отличать повторно используемые компоненты от чистых компонентов страницы.

Если интерфейсная страница сделает это, она сможет запустить наше приложение Vue. Затем нам нужно определить внутренний маршрутизатор и шаблон на стороне сервера.

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

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

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

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

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

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

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

php artisan make:controller SpaController

Откройте Spa-контроллер Контроллер и введите следующее:

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





    
    
    
    Vue SPA Demo

Мы определили необходимый элемент ~#app , содержащий компоненты App и другие компоненты, отображаемые на основе URL-адреса.

Запуск проекта

С тех пор мы завершили базовую структуру приложения spa с использованием Vue и маршрутизатора Vue. Далее, давайте запустим JavaScript, чтобы показать это:

Yarn watch or NPM run Watch

Когда мы введем соответствующий URL-адрес в браузере, мы увидим следующую страницу:

следующий шаг

Мы создали скелет приложения Vue spa, используя laravel в качестве уровня API. Однако в следующих учебных пособиях еще предстоит реализовать множество функций:

  • Определите маршрут 404 в интерфейсе
  • Использовать параметры маршрутизации
  • Подземный маршрут
  • Сделайте запрос API к laravel в компоненте
  • Их может быть гораздо больше, но я не собираюсь перечислять их все здесь

Благодаря этим основным приготовлениям в этом руководстве показано, что мы можем легко использовать маршрутизатор Vue для запуска приложения spa. Если вы не знакомы с маршрутизатором Vue, обратитесь к документации по маршрутизатору Vue.

Войдите в часть 2!

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