TALL로 당신의 첫 블로그 만들기 - 첫 부분

15704 단어 tailwindcssalpinejslaravellivewire
TALL(Tailwind CSS, Alpinejs, Laravel, Livewire) 강좌 시리즈로 첫 블로그를 만드는 첫 번째 부분에 오신 것을 환영합니다.이 강좌는 제품을 더욱 빨리 발표하고 개발 환경에서 TALL Stack을 설정하는 데 도움을 주는 TALL Stack을 소개합니다.
이 강좌가 끝나면 다음 내용을 학습할 수 있습니다.
  • 무엇이 이 고위층을 구성하고 웹 응용 프로그램을 개발할 때 각 층은 무엇인가
  • TALL Stack을 사용하여 웹 응용 프로그램을 만들 때 얻는 이점
  • 개발기기에서 어떻게 사용하는지Laravel Jetstream에 높은 창고를 설치한다.
  • Jetstream 인증을 추가하고 새로운 Laravel 어플리케이션
    • 을 구성하는 방법
    또한 본 시리즈의 다음 부분을 위해 충분한 준비를 하실 것입니다.
    가자.
    주의: 이 강좌는 시스템에 설치되어 있다고 가정합니다 Composer.컴퓨터에 Composer가 설치되어 있지 않으면 해당 컴퓨터website의 지침에 따라 설치합니다.또한 Laravel 및 입력 터미널 명령에 대한 선험적 지식이 있다고 가정합니다.

    높은 굴뚝 안내


    높은 창고는 전방과 후단 라이브러리/프레임워크의 조합으로 웹 응용 프로그램 개발을 쉽게 합니다.Toll은 Tailwind CSS, Alpine.js, Laravel와 Livewire의 알파벳 줄임말이다.
    예상한 바와 같이, 여기 백엔드 프레임워크는 Laravel이고, Alpine입니다.js 및 Tailwind CSS는 프런트엔드 라이브러리입니다.Laravel Livewire는 전단과 Laravel 후단 사이의 다리로서 Laravel에 동적 데이터 연결을 가져오기 때문에 Laravel을 통해 웹 사이트가 사용자를 대상으로 하는 부분에 대한 반응성과 상호작용을 실현할 수 있습니다. 자바스크립트를 사용하지 않고.

    순풍 CSS


    Tailwind CSS는 유틸리티 기반의 CSS 프레임워크로 CSS를 사용하는 번거로움을 없앨 수 있다.Tailwind CSS를 사용할 때 CSS 코드 행을 작성하지 않을 수도 있습니다.이것은 Tailwind CSS를 사용하면 심지어 CSS에 대해 광범위한 이해를 필요로 하지 않는다는 것을 의미한다. (CSS 클래스와 기타 속성의 기본 지식을 제외하고)
    Tailwind CSS가 있으면 당신이 설계할 수 있는 가능성은 무한합니다.네가 할 수 있는 일은 단지 너의 창조력과 상상력의 제한을 받는 것뿐이다.

    알피네스


    Alpinejs는 JavaScript 라이브러리를 지원합니다.이것은 매우 작은 자바스크립트 라이브러리입니다. 비교적 큰 자바스크립트 라이브러리, 예를 들어 Vue.js 를 대체하고 웹 응용 프로그램의 상호작용과 응답성을 위해 반응할 수 있습니다.
    Alpinejs는 Tailwind CSS에서 사용하는 유틸리티 우선 순위를 적용하여 웹 페이지에서 JavaScript를 쉽게 사용할 수 있도록 합니다.스크립트 태그나 스크립트에서 함수와 클래스를 작성하는 것이 아닙니다.js 파일에서 자바스크립트 코드를 HTML 표시된 것처럼 HTML attributes 표시할 수 있습니다.

    라빌


    Laravel 프레임워크는 PHP 프레임워크로 현대 사이트 개발에 단순성, 건장성과 생산력을 가져왔다.Laravel은 매우 방대한 개발자 커뮤니티, 광범위하지만 쉽게 파악할 수 있는 문서, 그리고 사이트 개발 주기에 도움이 되는 몇 개의 공식 소프트웨어 패키지를 가진 성숙한 프레임워크이다.
    Laravel을 사용한다는 것은 웹 사이트를 개발할 때 질문에 대한 답을 쉽게 찾을 수 있다는 것을 의미한다.웹 응용 프로그램을 생산 환경에 더 빨리 발표하고 배치할 수 있도록 무료, 소스 패키지로 구성된 대형 생태계에 접근할 수 있습니다.더 중요한 것은 PHP가 웹에서 얻을 수 있는 모든 장점을 얻을 수 있다는 것입니다. 예를 들어 더 많은 위탁 관리와 배치 옵션, 서버의 경제성, 지원, 그리고 많은 다른 부분을 얻을 수 있습니다.

    라빌 현장 연결


    LaravelLivewire는 현대적이고 동적이며 반응적인 사용자 인터페이스를 개발할 수 있으며 학습Vue.js과React 등 새로운 자바스크립트 프레임워크를 개발하지 않아도 됩니다.PHP/Laravel로 모든 코드를 작성하고 Livewire에서 JavaScript 섹션을 처리합니다.
    니가 블루랑 작업했다면그 전에 데이터 귀속이 개발자의 업무를 간소화하는 데 어떻게 도움이 되는지 알 수 있습니다.Livewire는 폼의 데이터 귀속을 지원합니다. (가장 널리 알려진 것은 모델 귀속입니다.) 폼 검증을 추가하고, 번거롭지 않은 파일 업로드, 예쁜 페이지 나누기, 일련의 다른 기능을 추가합니다.
    Livewire는 코드를 여러 구성 요소로 나누어서 사용할 때 구조가 좋은 모듈화 코드를 얻을 수 있습니다.Laravel 구성 요소와 유사하게 Livewire 구성 요소는 구성 요소마다 특정한 작업을 수행하지만, 구성 요소를 웹 페이지의 유일한 보기로 자유롭게 사용할 수 있고, 구성 요소에서 다른 작업을 수행할 수 있다는 개념을 가지고 있습니다.

    높은 굴뚝의 장점


    나는 네가 이미 위의 설명에서 모든 공구의 장점을 추단해 낼 수 있다고 믿는다.만약 당신이 여전히 이해하지 못한다면, 다음은 높은 쌓인 장점들입니다.
  • 웹 응용 프로그램을 더 빨리 발표할 수 있도록 도와 줍니다.
  • 인터넷 개발자로서 더 효율적으로 할 수 있게
  • 웹 개발 주기의 모든 부분을 책임진다. 전단, 후단과UX.
  • 웹 응용 프로그램의 안전을 보호한다.
  • 상호작용성과 호응성 웹 디자인을 새로운 수준으로 끌어올렸다
  • 및 기타 많은

    • 우리의 발전 환경을 세우다


    LaravelJetstream은 Laravel 웹 애플리케이션에 대한 기존 인증 및 API 지원을 제공하는 Laravel 비계 패키지입니다.Jetstream에는 Stack 또는 LivewireInertia 및 Tailwind CSS 및 Alpine이 함께 제공됩니다.js.이 자습서에서는 Livewire 스택을 사용합니다.
    Jetstream starter kit을 설치하려면 먼저 Laravel 설치 프로그램을 다운로드해야 합니다.
    composer global require laravel/installer
    이렇게 하면 Laravel 실행 파일이 Composer의 시스템 전반적인 공급업체 디렉토리에 다운로드됩니다.실행 가능한 파일을 전 세계에서 사용할 수 있도록 하기 위해서, Composer vendor/bin 디렉터리를 $PATH에 추가해야 합니다.개발 시스템에 따라 Composer 공급업체/bin 디렉토리는 다음 디렉토리 중 하나에 있습니다.
  • macOS:$HOME/.작성기/공급업체/bin
  • Windows:%USERPROFILE%\AppData\Roaming\Composer\vendor\bin
  • Linux:$HOME/.config/composer/vendor/bin 또는 $HOME/.작성기/공급업체/bin
    • 이 디렉토리를 $PATH에 추가하려면 운영 체제 설명서를 참조하십시오.
    Composer vendor/bin 디렉터리를 경로에 추가한 후, 리눅스의 홈/프로젝트나 Windows의 Documents/Projects와 같은 위탁 관리 프로젝트를 위한 폴더로 이동합니다.터미널/명령 프롬프트에서 다음 명령을 사용하여 새 Laravel 항목을 만듭니다.
    laravel new tall-blog
    설치에 필요한 의존항을 기다립니다.설치가 완료되면 다음을 볼 수 있습니다.
    kamil@kamil-sc650:~/Projects/Web$ laravel new tall-blog
 _                              _
| |                            | |
| |    __ _ _ __ __ ___  _____| |
| |   / _` | '__/ _` \ \ / / _ \ |
| |___| (_| | | | (_| |\ V / __/ |
|______\__,_|_| \__,_| \_/ \___|_|

Creating a "laravel/laravel" project at "./tall-blog"
Installing laravel/laravel (v8.5.9)
 - Installing laravel/laravel (v8.5.9): Extracting archive
Created project in /home/kamil/Projects/Web/tall-blog
> @php -r "file_exists('.env') || copy('.env.example', '.env');"
Loading composer repositories with package information
Updating dependencies
Lock file operations: 105 installs, 0 updates, 0 removals
 - Locking asm89/stack-cors (v2.0.2)
 - Locking brick/math (0.9.2)
 - Locking dnoegel/php-xdg-base-dir (v0.1.1)
 - Locking doctrine/inflector (2.0.3)
 - Locking doctrine/instantiator (1.4.0)
 - Locking doctrine/lexer (1.2.1)
 - Locking dragonmantank/cron-expression (v3.1.0)
 - Locking egulias/email-validator (2.1.25)
 - Locking facade/flare-client-php (1.3.7)
 ...
Writing lock file
Installing dependencies from lock file (including require-dev)                                                   
Package operations: 105 installs, 0 updates, 0 removals
 - Downloading symfony/var-dumper (v5.2.3)
 - Downloading symfony/string (v5.2.3)
 - Downloading symfony/console (v5.2.3)
 - Downloading symfony/css-selector (v5.2.3)
 - Downloading symfony/routing (v5.2.3)
 - Downloading symfony/process (v5.2.3)
 - Downloading symfony/mime (v5.2.3)
 - Downloading symfony/http-foundation
 ...
 - Installing doctrine/inflector (2.0.3): Extracting archive
 - Installing doctrine/lexer (1.2.1): Extracting archive
 - Installing symfony/polyfill-ctype (v1.22.0): Extracting archive
 - Installing webmozart/assert (1.9.1): Extracting archive
 - Installing dragonmantank/cron-expression (v3.1.0): Extracting archive
 - Installing symfony/polyfill-php80 (v1.22.0): Extracting archive
 - Installing symfony/polyfill-mbstring (v1.22.0): Extracting archive
 - Installing symfony/var-dumper (v5.2.3): Extracting archive
 - Installing symfony/polyfill-intl-normalizer (v1.22.0): Extracting archive
 - Installing symfony/polyfill-intl-grapheme (v1.22.0): Extracting archive
 - Installing symfony/string (v5.2.3): Extracting archive
 - Installing psr/container (1.0.0): Extracting archive
 - Installing symfony/service-contracts (v2.2.0): Extracting archive
 ...
63 package suggestions were added by new dependencies, use `composer suggest` to see details.                    
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi
Discovered Package: facade/ignition
Discovered Package: fideloper/proxy
Discovered Package: fruitcake/laravel-cors
Discovered Package: laravel/sail
Discovered Package: laravel/tinker
Discovered Package: nesbot/carbon
Discovered Package: nunomaduro/collision
Package manifest generated successfully.
74 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
> @php artisan key:generate --ansi
Application key set successfully.

Application ready! Build something amazing.
    이전 단계에서 오류가 발생하면 Laravel 웹 사이트에서 지정한 시스템 요구 사항here을 충족하는지 확인하십시오.
    내장형 PHP 서버를 시작하여 시작 사이트를 살펴보겠습니다.
    php artisan serve
    지금 http://127.0.0.1:8000우리가 새로 제작한 Laravel 사이트를 열어 보세요.
    우리의 다음 임무는 Laravel Jetstream을 설치하는 것입니다.프로젝트의 루트 디렉토리에 터미널에서 다음을 입력합니다.
    composer require laravel/jetstream
    마찬가지로 모든 것이 순조롭다면 당신은 이런 결과를 얻을 수 있을 것이다.
    kamil@kamil-sc650:~/Projects/Web$ cd tall-blog && composer require laravel/jetstream
Using version ^2.1 for laravel/jetstream
./composer.json has been updated
Running composer update laravel/jetstream
Loading composer repositories with package information
Updating dependencies
Lock file operations: 9 installs, 0 updates, 0 removals
 - Locking bacon/bacon-qr-code (2.0.3)
 - Locking dasprid/enum (1.0.3)
 - Locking jaybizzle/crawler-detect (v1.2.104)
 - Locking jenssegers/agent (v2.6.4)
 - Locking laravel/fortify (v1.7.5)
 - Locking laravel/jetstream (v2.1.3)
 - Locking mobiledetect/mobiledetectlib (2.8.35)
 - Locking paragonie/constant_time_encoding (v2.4.0)
 - Locking pragmarx/google2fa (8.0.0)
Writing lock file
Installing dependencies from lock file (including require-dev)                                                   
Package operations: 9 installs, 0 updates, 0 removals
 - Downloading laravel/jetstream (v2.1.3)
 - Installing dasprid/enum (1.0.3): Extracting archive
 - Installing bacon/bacon-qr-code (2.0.3): Extracting archive
 - Installing jaybizzle/crawler-detect (v1.2.104): Extracting archive
 - Installing paragonie/constant_time_encoding (v2.4.0): Extracting archive
 - Installing pragmarx/google2fa (8.0.0): Extracting archive
 - Installing laravel/fortify (v1.7.5): Extracting archive
 - Installing mobiledetect/mobiledetectlib (2.8.35): Extracting archive
 - Installing jenssegers/agent (v2.6.4): Extracting archive
 - Installing laravel/jetstream (v2.1.3): Extracting archive
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi
Discovered Package: facade/ignition
Discovered Package: fideloper/proxy
Discovered Package: fruitcake/laravel-cors
Discovered Package: jenssegers/agent
Discovered Package: laravel/fortify
Discovered Package: laravel/jetstream
Discovered Package: laravel/sail
Discovered Package: laravel/tinker
Discovered Package: nesbot/carbon
Discovered Package: nunomaduro/collision
Package manifest generated successfully.
75 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
    축하합니다!Jetstream 패키지가 설치되었습니다.이제 Livewire 스택에서 Jetstream을 사용하는 옵션으로 jetstream:install Artisan 명령을 livewire와 함께 실행해야 합니다.
    php artisan jetstream:install livewire
    블로그에 팀 지원이 필요한 경우 위 명령에 --teams을 첨부할 수 있습니다.Enter/Return 키를 누르면 다음과 같이 출력됩니다.
    kamil@kamil-sc650:~/Projects/Web/tall-blog$ php artisan jetstream:install livewire
Migration created successfully!
./composer.json has been updated
Running composer update livewire/livewire laravel/sanctum
Loading composer repositories with package information
Updating dependencies
Lock file operations: 2 installs, 0 updates, 0 removals
 - Locking laravel/sanctum (v2.9.0)
 - Locking livewire/livewire (v2.3.16)
Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 2 installs, 0 updates, 0 removals
 - Downloading livewire/livewire (v2.3.16)
 0/1 [>---------------------------]  0%
 1/1 [============================] 100% - Installing laravel/sanctum (v2.9.0): Extracting archive
 - Installing livewire/livewire (v2.3.16): Extracting archive
 0/2 [>---------------------------]  0%
 2/2 [============================] 100%Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi
Discovered Package: facade/ignition
Discovered Package: fideloper/proxy
Discovered Package: fruitcake/laravel-cors
Discovered Package: jenssegers/agent
Discovered Package: laravel/fortify
Discovered Package: laravel/jetstream
Discovered Package: laravel/sail
Discovered Package: laravel/sanctum
Discovered Package: laravel/tinker
Discovered Package: livewire/livewire
Discovered Package: nesbot/carbon
Discovered Package: nunomaduro/collision
Package manifest generated successfully.
76 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
Copied Directory [/vendor/laravel/sanctum/database/migrations] To [/database/migrations]
Copied File [/vendor/laravel/sanctum/config/sanctum.php] To [/config/sanctum.php]
Publishing complete.

Livewire scaffolding installed successfully.
Please execute "npm install && npm run dev" to build your assets.
    그 다음에 우리는 NPM 의존항을 설치하고 구축하며 데이터베이스를 이전해야 한다.터미널에 다음을 입력합니다.
    npm install
npm run dev
php artisan migrate
    NPM 의존항이 설치, 구축, 운행된 후에 우리의 블로그 구축 과정은 현재 완성되었다.기본 및 이중 요소 인증, 세션 관리 및 API 지원을 무료로 제공하는 Laravel 블로그
    실행되지 않으면 php artisan serve를 사용하여 내장 PHP 서버를 시작하고 브라우저를 http://127.0.0.1:8000로 가리킵니다.너는 이런 것을 얻을 수 있을 것이다.

    이것은 우리의 블로그 구축 과정이 성공적이라는 것을 의미한다.탐색 모음의 오른쪽 상단에 있는 등록 링크를 클릭하여 새 계정을 등록합니다.

    "자세한 내용을 입력하고""등록""버튼을 클릭하여 등록 및 로그인합니다."
    모든 것이 순조롭게 진행되면 기존 Jetstream 대시보드로 리디렉션됩니다.

    새로 만들어진 Jetstream 파워 대시보드의 기능을 원하는 대로 탐색하십시오.특히 내비게이션 표시줄의 메뉴 링크를 찾아서 무엇을 제공할 수 있는지 확인해야 한다.
    이것은 우리가 당신의 첫 번째 블로그와 높은 강좌 시리즈를 창설한 첫 회를 완성한 것입니다.다음 회에서는 Jetstream 및 Fortify(인증용)를 구성하여 프로필 사진 및 이메일 인증 지원, 데이터베이스 및 기타 구성을 활성화합니다.vv 파일, 우리의 경로를 설정하고 공용 폴더를 가리키는 기호 링크를 만들어서 파일 업로드를 가능하게 하고 기본 프로그램 로고를 변경하며 블로그에 필요한 모델과 이전을 만듭니다.
    읽어주셔서 감사합니다!다음 강좌에서 봐요.
    WKWebView와 UIWebView의 메모리 소비 차이
    PWA Room 단순화

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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