Laravel 및 Livewire 설치 방법

3695 단어 webdevcodenewbielaravelbeginners
Livewire는 무엇이며 왜 사용합니까?
  • Livewire는 laravel의 풀스택 프레임워크로, laravel과 블레이드 템플릿의 편안함을 벗어나지 않고도 현대적이고 반응적이며 동적인 인터페이스를 간단하게 구축할 수 있습니다.
  • Livewire 구성 요소는 데이터가 있는 서버에 AJAX 호출을 하고 서버는 전체 페이지를 다시 로드하지 않고 새 HTML로 구성 요소를 다시 렌더링하고 업데이트된 데이터로 DOM을 지능적으로 변경합니다.
  • Livewire는 복잡성을 포함하지 않고 VUE, REACT와 같은 SPA의 경험을 제공하는 훌륭한 스택입니다.
  • Livewire는 최신 동적 반응형 응용 프로그램을 구축하고 싶지만 VUE 및 REACT와 같은 프레임워크Full Javascript를 사용하고 싶지 않을 때 사용할 수 있습니다.

    • 이 블로그에서 보게 될 내용.
  • Laravel 설치
  • 라라벨 비계
  • 활선 설치
  • Livewire 구성 요소 생성

    • 먼저 Laravel 설치부터 시작하겠습니다.

     composer create-project laravel/laravel laravel-livewire-ex

    이제 cd laravel-livewire-ex를 사용하여 새로 생성된 laravel 프로젝트로 이동합니다.

    그런 다음 다음 명령을 사용하여 라라벨 브리즈를 사용하여 스캐폴딩을 생성해야 합니다.

    1단계 - composer require laravel/breeze --dev2단계 - php artisan breeze:install3단계 - npm install4단계 - npm run dev
    이제 로그인 및 등록 스캐폴딩을 성공적으로 만들었습니다.

    이제 데이터베이스를 만들고 .env 파일에 데이터베이스 이름을 입력한 다음 마이그레이션을 실행해야 합니다.

     php artisan migrate

    이제 Laravel 프로젝트에 Livewire를 설치할 시간입니다.
    다음 명령을 실행하여 livewire를 설치합니다.

     composer require livewire/livewire

    이제 livewire를 성공적으로 설치했습니다. 다음 단계는 전체 프로젝트에서 사용할 기본 파일에 livewire의 Javascript 및 스타일을 포함하는 것입니다(예제에서는 app.layout 파일을 열고 여기에 livewire 스타일, 스크립트 추가). 아래 주어진.

     @livewireStyles
 </head>
 <body>
   .....
 @livewireScripts
 </body>
 </html>

    예 이제 laravel과 livewire를 성공적으로 설치했습니다. 이제 livewire 파일을 생성하고 이를 larval 구성 요소에서 사용하는 방법을 살펴보겠습니다.

    다음 명령 실행 -

     php artisan make:livewire welcomeMsg

  • 두 개의 파일이 생성됩니다. 첫 번째는 구성 요소이고 두 번째는 보기 파일입니다.CLASS: app/Http/Livewire/WelcomeMsg.phpVIEW: resources/views/livewire/welcome-msg.blade.php
  • 클래스 파일에서 보기/구성 요소를 반환합니다.
  • 이제 resources/views/livewire/welcome-msg.blade.php에 있는 보기 파일을 열고 "Welcome this is my First Laravel Livewire Project"메시지(또는 화면에 표시하려는 모든 메시지)를 추가합니다.
  • 그런 다음 이 구성 요소를 사용해야 하는 곳에 추가합니다.
  • 대시보드 블레이드 파일을 열고 <livewire:welcome-msg /> 구성 요소를 추가합니다. 이제 브라우저를 열고 로그인 후 먼저 자신을 등록하면 대시보드에 환영 메시지가 표시됩니다.

    • 응!! 첫 번째 laravel livewire 프로젝트를 성공적으로 만들었습니다.

    읽어 주셔서 감사합니다.
    🦄 ❤️

    더 많은 블로그 게시물을 구독하십시오.



    더 이상 사용할 수 없는 기사

    Solana DEV #02: 지갑의 모든 Deposit 트랜잭션 검색
    역대 최고의 영화

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage