Как установить пакет пользовательского интерфейса Laravel с помощью Laravel Vite в laravel 9

В течение некоторого времени многие люди, включая меня, сталкивались с проблемой установки UI-пакета Laravel из-за обновления Vite с webpack на Laravel 9.19. Я сам столкнулся с этой проблемой и решил ее спустя долгое время, поэтому многие братья рассказывали мне, как я справляюсь с этой проблемой, я хотел бы помочь им, поэтому я решил осветить эту проблему в небольшом посте.

Этот пост впервые опубликован на странице Установка пакета Laravel UI с помощью Laravel Vite.

Фактически Laravel 9.19 перешел от Laravel Webpack к Viet. Фактически, это делает разработку Wave-приложений во много раз быстрее, чем раньше. Итак, давайте начнем разбираться, как установить пакет Laravel UI с помощью Laravel Vite (Как установить пакет Laravel UI с помощью Laravel Vite).

Шаг 1:

Шаг 2: Установите пакет Laravel UI для Bootstrap

composer require laravel/ui

Шаг 3: Установите Auth Scaffolding с Bootstrap

php artisan ui bootstrap -auth

Шаг 4: Установка NPM

npm install

Шаг 5: Отредактируйте Vite.config.js

Вставьте этот код & затем удалите resources/css/app.css

import { defineConfig } from ‘vite’;

import laravel from ‘laravel-vite-plugin’;

import path from ‘path’

export default defineConfig({

плагины: [

laravel([

‘resources/js/app.js’,

]),

],

resolve: {

псевдоним: {

‘~bootstrap’: path.resolve(__dirname,

‘node_modules/bootstrap’),

}

},

});

Шаг 6: Обновление Bootstrap .js

Откройте файл resources/js/bootstrap.js, выберите весь код и удалите его. Затем добавьте этот код:

import loadash from ‘lodash’

window._ = loadash

/**

  • Мы загрузим HTTP-библиотеку axios, которая позволяет нам легко отправлять запросы

  • к нашему внутреннему серверу Laravel. Эта библиотека автоматически обрабатывает отправку

  • CSRF-токен в качестве заголовка на основе значения маркера «XSRF» cookie.

*/

import axios from ‘axios’

window.axios = axios

window.axios.defaults.headers.common[‘X-Requested-With’] = ‘XMLHttpRequest’;

/**

  • Echo предоставляет выразительный API для подписки на каналы и прослушивания

  • событий, которые транслируются Laravel. Echo и трансляция событий

  • позволяет вашей команде легко создавать надежные веб-приложения реального времени.

*/

// import Echo from ‘laravel-echo’;

// window.Pusher = require(‘pusher- js’);

// window.Echo = new Echo({

// broadcastcaster: ‘pusher’,

// ключ: process.env.MIX_PUSHER_APP_KEY, // кластер: process.env.MIX_PUSHER_APP_CLUSTER, // forceTLS: true

// });

Шаг 7: Импортируйте Bootstrap SCSS в папку JS

Откройте папку resources/js/app.js, выделите весь код и удалите его. Затем добавьте этот код:

import ‘./bootstrap’;

import ‘../sass/app. scss’

import * as bootstrap from ‘bootstrap’

Шаг 8: Замените Webpack mix() на директиву @blade

Обычно, когда мы устанавливаем Laravel в свежий проект, он запускает свои css и js с помощью webpack. Но когда мы используем Laravel @vite, нам нужно заменить Laravel mix() на @blade.

Откройте views/layouts/app.blade.php

Здесь вы можете увидеть две ссылки:

Одна для js файла, а другая для css файла. Это можно использовать с Laravel mix(), но это не может работать с Laravel @vite. Теперь удалите обе ссылки на css и js.

По всем вопросам и за помощью обращайтесь

Оцените статью
devanswers.ru
Добавить комментарий