Курс по Laravel+inertia+vue. Урок 2. Layout, Link, Meta, Route
Продолжаем серию роликов по inertia.js. В этом уроке мы продолжим подготовку проекта к дальнейшей работе: разберемся как создать layout, добавим компоненты Link и Meta, перенесем Routes из бэк-энда в клиентскую часть. Ссылка на библиотеку по роутам из урока: https://github.com/tightenco/ziggy #inertia#laravel#cutcode --------------------------------------------------------------------------------- Репозиторий https://github.com/CutCodeRu/laravel-inertia-vue-crud ❗️❗️❗️как делать сложные сайты на laravel? Это просто с cutcode! Поддерживай мой проект - https://cutcode.ru/ Угостить меня кофе - buymeacoffee.com/cutcode Мой помощник Тэйлор готов выдать тебе подарок. Забирать тут - https://cutcode.ru/chat-bot --------------------------------------------------------------------------------- ⏰ Таймкоды: 00:00 Введение 00:29 Содержание урока 01:00 Клиентская часть для автоматической компиляции 02:04 Создание общего layout 06:44 Компонент inertia link 12:44 Компонент inertia head 17:00 Подведение итогов Всех поклонников Laravel я приветствую на канале Cutcode! Мы продолжаем серию роликов по inertia.js и напомню, что в конечном итоге мы реализуем небольшой проект с выводом пользователей и возможностью ими управлять, полноценный CRUD. Напомню, что в предыдущем ролике мы установили и настроили наш проект для дальнейшей работы и отобразили первую страницу. Что же нас ждёт сегодня? Сегодня мы так же продолжим подготавливать наш проект к дальнейшей работе а именно разберемся, как создать layout у страниц и сделать его по умолчанию, добавим ссылки между компонентами - воспользуемся inertia компонентом LINK и разберемся в его особенностях. Добавим head мету на нашей странице с использованием инерция компонентов и перенесем road и из бэк-энда в нашу клиентскую часть для удобства работы. Но друзья меньше слов, больше практики - погнали! Так давайте начнем с того, что скомпилируем нашу клиентскую часть, но пойдем немножко другим путем. Помните в первой части по инерции мы каждый раз вызывали команду npm run dev при каких либо изменениях в скрипте и компилировали клиентскую часть. В этот раз мы воспользуемся немного другой командой - npm run hot, который автоматически будет отслеживать изменения в наших скриптах и перекомпилировать файлы, которые в последующем будут также подгружаться в браузер. Давайте посмотрим, как это работает: немного изменим app.js, добавим абзац и далее увидим как в консоли файл перекомпилированы. Начнем мы сегодняшний урок с того что поиграемся с layot. Если мы разрабатываем классическое laravel приложение с blade шаблонизатором, то у нас также есть layout шаблон и остальные страницы уже экстендятся от него, тем самым мы не дублируем код и так работать гораздо удобнее. Тот же самый подход мы будем использовать и в нашем inertia view приложении. Также сейчас создадим layout и сделаем его по дефолту по-умолчанию для всех страниц. Как и при работе с blade шаблонизатором, когда мы создаем layout это не что иное как простой blade файл. Так и здесь мы создадим сейчас layout это будет просто view компонент. Давайте его создадим он у меня быть располагаться в директории Shared. У вас может быть любая другая директория. Здесь у меня будет располагаться и все остальные общие компоненты. --------------------------------------------------------------------------------- делитесь этим видео с друзьями: https://www.youtube.com/watch?v=KHIK9cA4zkw подпишитесь на YouTube-канал: https://www.youtube.com/channel/UCkKZ3S8JiB5nUAaTYhpCwzQ?sub_confirmation=1 Курс по Laravel с нуля: https://www.youtube.com/watch?v=phTSw6XDATw&list=PLTucyHptHtTkUbXaikXEmCWL8GradRx9I Курс по Laravel+inertia+vue. Урок 2. Layout, Link, Meta, Route --------------------------------------------------------------------------------- наш сайт: https://cutcode.ru/ наш instagram: https://www.instagram.com/cutcoderu/ Наш telegram-канал: https://t.me/laravel_cutcode
Продолжаем серию роликов по inertia.js. В этом уроке мы продолжим подготовку проекта к дальнейшей работе: разберемся как создать layout, добавим компоненты Link и Meta, перенесем Routes из бэк-энда в клиентскую часть. Ссылка на библиотеку по роутам из урока: https://github.com/tightenco/ziggy #inertia#laravel#cutcode --------------------------------------------------------------------------------- Репозиторий https://github.com/CutCodeRu/laravel-inertia-vue-crud ❗️❗️❗️как делать сложные сайты на laravel? Это просто с cutcode! Поддерживай мой проект - https://cutcode.ru/ Угостить меня кофе - buymeacoffee.com/cutcode Мой помощник Тэйлор готов выдать тебе подарок. Забирать тут - https://cutcode.ru/chat-bot --------------------------------------------------------------------------------- ⏰ Таймкоды: 00:00 Введение 00:29 Содержание урока 01:00 Клиентская часть для автоматической компиляции 02:04 Создание общего layout 06:44 Компонент inertia link 12:44 Компонент inertia head 17:00 Подведение итогов Всех поклонников Laravel я приветствую на канале Cutcode! Мы продолжаем серию роликов по inertia.js и напомню, что в конечном итоге мы реализуем небольшой проект с выводом пользователей и возможностью ими управлять, полноценный CRUD. Напомню, что в предыдущем ролике мы установили и настроили наш проект для дальнейшей работы и отобразили первую страницу. Что же нас ждёт сегодня? Сегодня мы так же продолжим подготавливать наш проект к дальнейшей работе а именно разберемся, как создать layout у страниц и сделать его по умолчанию, добавим ссылки между компонентами - воспользуемся inertia компонентом LINK и разберемся в его особенностях. Добавим head мету на нашей странице с использованием инерция компонентов и перенесем road и из бэк-энда в нашу клиентскую часть для удобства работы. Но друзья меньше слов, больше практики - погнали! Так давайте начнем с того, что скомпилируем нашу клиентскую часть, но пойдем немножко другим путем. Помните в первой части по инерции мы каждый раз вызывали команду npm run dev при каких либо изменениях в скрипте и компилировали клиентскую часть. В этот раз мы воспользуемся немного другой командой - npm run hot, который автоматически будет отслеживать изменения в наших скриптах и перекомпилировать файлы, которые в последующем будут также подгружаться в браузер. Давайте посмотрим, как это работает: немного изменим app.js, добавим абзац и далее увидим как в консоли файл перекомпилированы. Начнем мы сегодняшний урок с того что поиграемся с layot. Если мы разрабатываем классическое laravel приложение с blade шаблонизатором, то у нас также есть layout шаблон и остальные страницы уже экстендятся от него, тем самым мы не дублируем код и так работать гораздо удобнее. Тот же самый подход мы будем использовать и в нашем inertia view приложении. Также сейчас создадим layout и сделаем его по дефолту по-умолчанию для всех страниц. Как и при работе с blade шаблонизатором, когда мы создаем layout это не что иное как простой blade файл. Так и здесь мы создадим сейчас layout это будет просто view компонент. Давайте его создадим он у меня быть располагаться в директории Shared. У вас может быть любая другая директория. Здесь у меня будет располагаться и все остальные общие компоненты. --------------------------------------------------------------------------------- делитесь этим видео с друзьями: https://www.youtube.com/watch?v=KHIK9cA4zkw подпишитесь на YouTube-канал: https://www.youtube.com/channel/UCkKZ3S8JiB5nUAaTYhpCwzQ?sub_confirmation=1 Курс по Laravel с нуля: https://www.youtube.com/watch?v=phTSw6XDATw&list=PLTucyHptHtTkUbXaikXEmCWL8GradRx9I Курс по Laravel+inertia+vue. Урок 2. Layout, Link, Meta, Route --------------------------------------------------------------------------------- наш сайт: https://cutcode.ru/ наш instagram: https://www.instagram.com/cutcoderu/ Наш telegram-канал: https://t.me/laravel_cutcode