Laravel Vue Laravel + Vue = ❤️

Что-то отсутствует или неверно? Это Источник статьи находится на Github Отказ

Пожалуйста, не стесняйтесь Откройте проблему или отправить PR Отказ

Введение
Причины использовать Vue и Laravel вместе
- По умолчанию по умолчанию
- Maravel Mix.
- Широко распространенное принятие сообщества
Общие чтены при использовании Vue и laravel
- Blade и Vue интерполяционный синтаксис
- Передача PHP переменные как Vue компонент
- Маршрутизатор Laravel и Vue-маршрутизатор
  - Установка все это
    - Установить Vue-маршрутизатор
    - Создайте экземпляр маршрутизатора и несколько маршрутов
    - Создайте простой компонент приложения
    - Создайте несколько компонентов страницы
    - Настройте экземпляр корня Vue
    - Настроить маршрутизатор Laravel
    - Создайте контроллер и действие
    - Создать вид
- Отсутствие псевдонимов WebPack при использовании Laravel Mix
Спасибо и хорошо до свидания

Недавно было выпущено превосходное руководство по сообществу Vue. Руководство по всем вещам Vue – написано для Vue Community, в сообществе Vuue.

Штатура этой статьи будет отражаться точно, макет Раздел Laravel The Vue Community Guide , направляясь на рубрику.

Намерение состоит в том, чтобы обеспечить живой ресурс (т. Е. Он будет обновлен со временем, если/при необходимости), который входит в гораздо большую деталь (включая образцы/демонстрацию кода), чем руководство (который предназначен для более лаконичных и легких для переварения) Отказ

По умолчанию по умолчанию

Учетная установка Laravel есть все, что вам нужно Чтобы начать усиление шаблонов визуализации серверов (Blade) с помощью Vue компонентов. Нет необходимости установки.

После создания проекта Laravel вам будет предоставлено:

bootstrap.js :
- загружает некоторые библиотеки, такие как Lodyash, Axios и Popper
- Настраивает AXIOS для CSRF
app.js :
- делает Vue в мире доступным
- Регистрирует . Экзамен
- Обеспечивает пример код о том, как автоматически регистрировать компоненты Vue
- Инициализы Vue.
Экдамплецкомпонент:

Вы, конечно, бесплатно настроить эти файлы к вашим потребностям, таким как путем удаления ненужных/ненужных библиотек.

Maravel Mix.

Laravel Mix – APID API в верхней части WebPack, также включена в коробку – принимает большую часть боли из активов для вас, поэтому вы можете сосредоточиться на создании ваших Vue компонентов.

Вам просто нужно запустить NPM бегите часы И тогда вы можете получить прямо на работу над написанием ваших компонентов Vue!

Это не совсем @ vue/cli -levels of outsome. но это на самом деле действительно хорошая библиотека И я рекомендую это. Это также совсем не привязано к Laravel Вы можете использовать его в любом проекте.

Широко распространенное принятие сообщества

Несколько выдающихся членов ничтого сообщества Laravel являются сторонниками VUE (и его экосистема).

Это включает в себя, но не ограничивается:

Тейлор Отвелл
- Основатель (и доброжелательный диктатор для жизни) сама Larave
- Известный пользователь Laravel и Vue
Адам Уоаль
- Автор Tailwindcss.
- Создатель Расширенный курс дизайна Vue Component
- Известный пользователь Laravel и Vue
Джеффри путь
- Автор Тестирование Laravel Декодируется
- Вопреки говорят на Ларакон
- Создатель несколько курсов Laravel/Vue
- Известный пользователь Laravel и Vue

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

Естественно, тогда следует, что будет:

Больше ресурсов, чтобы помочь вам учиться (руководства, учебники, статьи)
Больше людей, у которых есть опыт работы с Vue + Laravel (помощь, поддержка, руководство)
В целом здоровая экосистема (плагины, котлеты и т. Д.)

Blade и Vue интерполяционный синтаксис

Как вы можете знать оба Шаблоны лезвия а также Vue шаблоны Используйте синтаксис усов (I.E. {{message}} ) для переменной интерполяции, которая представляет проблему.

К счастью, решение простое – просто подготовим @ к заявлению уха. Это будет Поручите механизм рендеринга шаблона лезвия Чтобы игнорировать это утверждение, оставляя его позже обработано Vue.

You have @{{ messageCount }} new message(s).

Если вам нужно избежать нескольких утверждений усов, вы можете вместо этого использовать @verbatim Директива.

@verbatim
    
        Welcome {{ user.name }} ({{ user.id }})!
        Your last visit was: {{ user.lastVisit }}.
    
@endverbatim

Передача PHP переменные как Vue компонент

Если вам когда-нибудь нужно пройти переменную лезвия как опора в Vue компонент изнутри Шаблон лезвия Тогда вы можете испытать соблазн добраться до json_encode Однако вы должны вместо этого использовать @JSON Директива:

Маршрутизатор Laravel и Vue-маршрутизатор

Вы можете абсолютно использовать Маршрутизатор Laravel и Vue-маршрутизатор вместе без слишком много усилий.

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

Установка все это

ПРИМЕЧАНИЕ: В этом разделе предполагается относительно базовое понимание Vue, Vue-Router, Laravel и командной строки.

Котелная таблица, предоставляемая LARAVAVE, не включает Vue-маршрутизатор, но не будет никаких неприятностей для настройки.

Установить Vue-маршрутизатор

npm install vue-router --save

Создайте экземпляр маршрутизатора и несколько маршрутов

Создать Ресурсы/JS/Router.js :

import Vue from "vue";
import VueRouter from "vue-router";

import PageHome from "./pages/Home";
import PageAbout from "./pages/About";

Vue.use(VueRouter);

const router = new VueRouter({
    mode: "history",
    routes: [
        {
            path: "/",
            component: PageHome
        },
        {
            path: "/about",
            component: PageAbout
        }
    ]
});

export default router;

Создайте простой компонент приложения

Создать Ресурсы/js/Компоненты/app.vue :

Создайте несколько компонентов страницы

Создать Ресурсы/js/pages/home.vue :

Создать Ресурсы/JS/Страницы/О.Вуэ :

Настройте экземпляр корня Vue

Модифицировать Ресурсы/js/app.js :

import router from "./router";
import App from "./components/App";

const app = new Vue({
    el: '#app',
    router,               // <-- register router with Vue
    render: (h) => h(App) // <-- render App component
});

Настроить маршрутизатор Laravel

Это важная часть – нам нужно проинструктировать Laravel направить все запросы на индекс Действие на Spacontroller Отказ

Заменить Маршруты/web.php. :

where('vue', '.*');

Примечание: Любые маршруты, зарегистрированные до того, как этот улов все еще будет работать.

Вот как мы можем обрабатывать несколько маршрутов с Larave и другими с Vue-маршрутизатором.

Создайте контроллер и действие

Создать Приложение/HTTP/Controllers/Spacontroller.php :

Создать вид

Создать Ресурсы/Просмотры/Spa.blade.php :




    
        
        
        

        Laravel + Vue = ❤️

Вот и все! Сейчас вы обслуживаете Vue Spa с Laravel, а Vue-маршрутизатор отвечает за все маршрутизацию (за исключением любых маршрутов, которые были определены перед уловом, который будет обрабатываться Laravel!).

Отсутствие псевдонимов WebPack при использовании Laravel Mix

Если вы использовали Vue-Cli. Тогда вы, вероятно, будете знакомы с (и использовали для использования) псевдонимов такие как @ и ~ Отказ

К сожалению, это не установлено по умолчанию. К счастью для нас – Там плагин Отказ

Спасибо за чтение и наслаждайтесь развивающимися с Laravel и Vue.

Также обязательно проверьте Новое Vue Community Отказ