Laravel 8에 Alpine.js를 설치하는 방법
9894 단어 webdevalpinejsjavascriptlaravel
Alpine js는 새로운 프론트엔드 프레임워크와 상호작용을 위한 경량 라이브러리입니다. Alpine js 구문은 Vue js와 거의 유사하므로 vue 를 알고 있다면 이 프레임워크를 쉽게 배울 수 있습니다.
Laravel 8에 Alpine.js를 설치하는 2가지 방법
1단계: Laravel 프로젝트 생성
2단계: Alpine.js CDN 추가
3단계: Laravel Mix를 사용하여 Alpine.js 추가
1단계: Laravel 프로젝트 생성
새로운 laravel 프로젝트를 설치하므로 터미널로 이동하여 명령을 입력하고 새 laravel 앱을 만듭니다.
composer create-project laravel/laravel alpine-js
2단계: Alpine.js CDN 추가
CDN을 사용하면 초보자에게 매우 쉽고 간단합니다. 단순히 Apline.js CND를 추가하는 데 시간이 많이 걸리지 않습니다.
태그 앞에 dist/alpine.min.js cdn 추가
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
defer 속성 사용, defer 속성은 페이지가 구문 분석을 완료할 때 스크립트가 실행되도록 지정합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Alpine Js</title>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
</head>
<body>
<div x-data="{ show: false }">
<button @click="show = !show">Show</button>
<h1 x-show="show">Alpine Js is working !</h1>
</div>
<hr>
<div x-data>
<button @click="alert('Alpine Js is working !')">Click</button>
</div>
</body>
</html>
3단계: Laravel Mix를 사용하여 Alpine.js 추가
Laravel Mixing Alpine.js에서 설치는 매우 쉽습니다. node npm 패키지가 없으면 첫 번째 node npm을 설치해야 하고 Laravel mix가 작동하지 않으면 먼저 설치해야 합니다.
npm install
다음으로 아래의 npm 명령을 사용하여 alpine js를 설치해야 합니다.
npm install alpinejs
다음으로 resources/js/app.js 파일에 Alpine js를 가져와야 합니다.
import 'alpinejs';
그런 다음 laravel mix 를 컴파일해야 합니다. 명령을 실행할 수 있습니다.
npm run watch
성공적으로 컴파일되었는지 확인
Laravel Mix v6.0.19
✔ Compiled Successfully in 1242ms
┌─────────────────────────────────────────────────────────────────────────────────────────────────────────────┬─────────┐
│ File │ Size │
├─────────────────────────────────────────────────────────────────────────────────────────────────────────────┼─────────┤
│ /js/app.js │ 675 KiB │
│ css/app.css │ 1 bytes │
└─────────────────────────────────────────────────────────────────────────────────────────────────────────────┴─────────
전에 머리를 설정
<script src="{{ mix('js/app.js') }}" defer></script>
이제 최종
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Alpine Js</title>
<script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body>
<div x-data="{ show: false }">
<button @click="show = !show">Show</button>
<h1 x-show="show">Alpine Js is working !</h1>
</div>
<hr>
<div x-data>
<button @click="alert('Alpine Js is working !')">Click</button>
</div>
</body>
</html>
내 웹사이트 방문larainfo.com
또한 읽기
3 way to install bootstrap 5 in laravel 8
Laravel php artisan inspire command
Laravel clear cache without using artisan command
Reference
이 문제에 관하여(Laravel 8에 Alpine.js를 설치하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/larainfo/how-to-install-alpine-js-in-laravel-8-5ge8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
