Laravel과 함께 Svelte.js 사용하기 1부: Svelte로 Laravel 애플리케이션 설정하기

4971 단어 laravelsveltetutoriallaravelsvelte
Svelte는 사용자 인터페이스 구축에 대한 근본적이고 새로운 접근 방식입니다. 프론트엔드 프레임워크가 아닙니다. 가볍고 바닐라 JavaScript로 컴파일되는 간단한 구문이 있습니다. 이 게시물에서는 Svelte.js를 laravel과 통합하고 작은 애플리케이션을 빌드합니다.

이 첫 번째 파트에서는 ​​로컬에서 새로운 Laravel 프로젝트를 설정하고 Laravel과 함께 제공되는 Vue.js 스캐폴딩을 Svelte.js 스캐폴딩으로 대체할 것입니다. 다음 단계에 따라 수행할 수 있습니다.

라라벨 설치하기



새로운 Laravel 프로젝트를 설치하려면 Composer 이 필요합니다. 먼저 PHP 7.2 및 composer가 설치되어 있는지 확인하십시오. PHP, Composer, Node.js, npm 등을 설치하고 Laravel용 로컬 서버를 설정하지 않을 것입니다. 초기 설정이 모두 완료되었고 사용할 준비가 되었다고 가정합니다. XAMPP/WAMPP/MAMPP 또는 원하는 다른 개발 서버를 사용할 수 있습니다.
composer를 통해 새 Laravel 프로젝트를 생성하려면 프로젝트를 저장하려는 원하는 디렉토리에서 다음 명령을 사용해야 합니다.

$ composer create-project --prefer-dist laravel/laravel project_name


이렇게 하면 로컬 컴퓨터에 새로운 Laravel 프로젝트가 설치됩니다. letscd를 새 프로젝트 디렉토리에 넣고 프로젝트를 실행합니다.

$ cd project_name
$ php artisan serve


우리는 다음과 같은 결과를 얻을 것입니다.

Laravel development server started: <http://127.0.0.1:8000>


우리 프로젝트는 http://127.0.0.1:8000에서 제공됩니다. 이 링크를 탐색하면 Laravel 5 시작 페이지가 표시됩니다.

Svelte 사전 설정 설치



이제 We Wow Web으로 laravel-svelte-preset를 설치합니다. 그렇게 하려면 다음 명령을 실행하십시오.

$ composer require wewowweb/laravel-svelte-preset


이제 프로젝트의 초기 발판을 얻으려면 다음을 실행하십시오.

$ php artisan preset svelte


이제 JavaScript 종속성을 설치합니다.

npm install && npm run dev


패키지는 초기 파일 세트를 제공합니다.
  • /js/app.js
  • /js/components/App.svelte
  • webpack.mix.js

    • 이제 Svelte는 Vue 대신 Laravel 프로젝트로 완전히 설정되었습니다.

    Svelte 애플리케이션 설정



    이제 Laravel 블레이드 파일에 Svelte 앱을 마운트하려면 선호하는 편집기에서 resources/views/welcome.blade.php 파일을 열고 페이지의 모든 내용을 다음으로 교체해야 합니다.

    
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
        <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    </head>
    <body>
        <script src="{{ asset('js/app.js') }}"></script>
    </body>
</html>


    이렇게 하면 resources/js/components/App.svelte 파일의 Svelte 앱이 welcome.blade.php 에 마운트됩니다. 이제 브라우저를 확인하면 Laravel 5 시작 페이지 대신 다음 페이지가 표시됩니다.


    이것은 Svelte.js를 Laravel 5.8laravel-svelte-preset과 통합하는 짧고 간단한 방법입니다. 이 시리즈에서는 Svelte 프론트엔드와 Laravel API를 사용하여 간단한 앱을 빌드할 것입니다. 이 시리즈의 다음 부분에서 프로젝트를 시작할 것입니다. 당신이 그것에 대해 어떻게 생각하는지 그리고 우리가 여기서 어떤 유형의 프로젝트를 만들 수 있는지 알려주십시오. 건배.

    업데이트: 이 프리셋은 Laravel 5.8에서만 작동합니다. 그러나 이제 Laravel 6이 출시되었고 이것은 Laravel 6에서 작동하지 않습니다. Larvel 6에서 이 작업을 수행하려면 약간의 조정이 필요합니다. 다음편에서 설명드리겠습니다.
    함수에 대한length 속성
    호출 약정 (cdecl,fastcall,thiscall)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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