Как установить Vue 3 в Laravel с помощью Vite

В Laravel начиная с версии 9.19 не используется webpack.mix.js. Вместо этого теперь файл vite.config.js.

В этой статье мы узнаем, как установить Vue.js 3 с последними обновлениями в laravel с помощью vite. Если вы хотите увидеть пример установки vue 3 в laravel-vite, то вы попали в правильное место.

Как вы знаете, Laravel - самый популярный PHP-фреймворк, он прост в использовании, масштабируем и гибок. Vue.js - это прогрессивный фреймворк для создания пользовательских интерфейсов, он легкий, его легко использовать и изучать. Vue 3 - это последняя версия фреймворка Vue.js, которая быстро развивается.

К концу статьи вы сможете создать приложение Vue 3 и Laravel на базе vite. Мы также узнаем, как создать компонент vue 3 и подключить его к blade-файлу в Laravel 9.

Как установить Vue 3 в Laravel с помощью Vite

Выполните следующие действия, чтобы установить Vue 3 в приложении laravel 9.

Установите Laravel 9
Установите NPM зависимости
Установите Vue 3
Установка vitejs/plugin-vue plugin
Обновите файл vite.config.js
Скомпилируйте ассеты
Создайте приложение Vue 3
Создайте компонент Vue 3
Подключите компонент Vue 3 к блейд-файлу Laravel и используйте директиву. vite для добавления ресурсов.
Измените маршруты Laravel.
Обновите .env файл
Запустите локальный сервер.

1. Установка Laravel 9

Во-первых, запустите терминал и выполните следующую команду для быстрого создания нового проекта Laravel

composer create-project --prefer-dist laravel/laravel:^9.0 laravel9-vue3-vite

или, если у вас уже установлен глобально установщик Laravel, выполните данную команду:

laravel new laravel9-vue3-vite

2. Установите NPM зависимости

Запустите следующую команду для установки фронтенд зависимостей

npm install

3. Установка Vue 3

Теперь после установки node modules нам нужно установить vue 3 в нашем приложении, для этого выполните следующую команду в терминале:

npm install vue@next vue-loader@next

Vue-loader - это загрузчик для webpack, который позволяет создавать компоненты Vue в формате, называемом однофайловыми компонентами. vue-loader@next - это загрузчик, предназначенный для webpack для создания компонентов Vue в однофайловых компонентах, называемых SFC.

4. Установка vitejs/plugin-vue plugin

В последней версии Laravel 9 установите vitejs/plugin-плагин vue для установки vue 3 или Vue в Laravel. Этот плагин предоставляет необходимые зависимости для запуска приложения vue js на vite.

Vite - это команда сборки, которая объединяет ваш код с Rollup и запускает порт localhost: 3000 для предоставления функции горячего обновления.

npm i @vitejs/plugin-vue

5. Обновите файл vite.config.js

Vite - это модульный пакет для современных приложений JavaScript. Откройте vite.config.js и вставьте следующий код.

// vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'


export default defineConfig({
    plugins: [
        vue(),
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
});

Тут сначала определяем конфигурацию из vite и импортируйте laravel-vite-plugin.

plugins[] берут путь к файлу js и CSS и создают пакеты для вашего приложения: добавляем vue() в массив плагинов.

6. Запуск Vite Dev Server

Теперь, после установки Vue 3, нам нужно запустить сервер разработки для Vite, для этого запустите следующую команду:

npm run dev

Теперь изменения в ваших resources/js/app.js и resource/css/app.css файлах будут отслеживаться. Запускается сервер Vite на http://localhost:3000. Вы не можете открыть его в браузере, так как он предназначен для горячей перезагрузки vite, и он работает в фоновом режиме и просматривает ресурсы вашего приложения, такие как JS и CSS.

7. Создайте приложение Vue 3

В resources/js/app.js создайте экземпляр Vue 3: сначала вы импортируете {create App} из vue, он принимает параметр, который мы передали App. Перед этим вы можете создать файл vue, который является основным файлом, ответственным за содержимое Vue js, с именем App.vue.

// app.js
require('./bootstrap');

import {createApp} from 'vue'

import App from './App.vue'

createApp(App).mount("#app")

8. Создайте компонент Vue 3

В папке js создайте файл с именем App.vue и вставьте ваше содержимое. Для примера давайте напишем "Как установить Vue 3 в Laravel 9 с помощью Vite"

<template>
    Как установить Vue 3 в Laravel 9 с помощью Vite
template>

9. Подключите компонент Vue 3 к блейд-файлу Laravel

На этом шаге перейдите в каталог resources/views, создайте app.blade.php файл и добавьте следующий код в этот файл:

@vite('resources/js/app.js')

10. Измените маршруты Laravel

Открыть routes/web.php и заменить welcome.blade.php на vue.blade.php файл для загрузки vue.blade.php, в котором будет выполняться наш код VueJS.

<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('app');
});

11. Обновите .env файл

Откройте файл .env и обновите APP_URL и установите APP_URL=http://localhost:8000. Это поможет Vite мгновенно проверять обновления js и CSS и изменять их в браузере.

APP_URL=http://localhost:8000

12. Запустите локальный сервер

Теперь откройте новый терминал и выполните следующую команду из вашего терминала, чтобы запустить сервер разработки. По умолчанию он запускает проект на порту localhost 8000, но вы также можете изменить его. Запустите npm run dev server также, чтобы сайт отслеживал изменения в шаблонах vue js и автоматически обновлялся в браузере. если вы запускаете другой проект с тем же портом.

php artisan serve

и перейдите по следующей ссылке http://localhost:8000/

Спасибо за внимание).Оригинал статьи.

Вы можете найти репозиторий GitHub здесь suresh-ramani/laravel-vue3-vite.

Оставить комментарий