アルパインを設置する方法.ラーラベル8のJS

10095 ワード
webdev alpinejs javascript laravel テキストリンク
このチュートリアルでは、アルパインをインストールする方法を学びます.LaravelのJS?
アルパインJSは、軽量ライブラリと双方向のフロントエンドのフレームワークです.アルプスJSの構文はVue JSにほぼ似ているので、Vueを知っているなら、このフレームワークを学ぶのは簡単です.

アルパインをインストールする2つの方法.ラーラベル8のJS

ステップ1 : Laravelプロジェクトを作成する

ステップ2:アルパインを加える.JS CDN

ステップ3:アルパインを追加します.ララベルミックスを使用したJS

ステップ1 : Laravelプロジェクトを作成する
新鮮なLaravelプロジェクトをインストールするので、端末に頭を、コマンドを入力し、新しいLaravelアプリを作成します.
composer create-project laravel/laravel alpine-js

ステップ2:APLINEを追加します.JS CDN
cdnを使用することは非常に簡単で初心者のための簡単です.それはあなたが単にaplineを追加する必要が多くの時間がかかりません.JS
の前にタパスを追加dist/アルパイン.MN . JS
<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:アルパインを追加します.ララベルミックスを使用したJS
アルパイン混合ララベルで.JSのインストールは非常に簡単です.ノードNPMパッケージを持っていない場合は最初のノードNPMをインストールする必要があります.
npm install
次にNPMコマンドを以下のように設定します.
npm install alpinejs
次に、リソース/JS/アプリでアルパインのJSをインポートする必要があります.jsファイル
import 'alpinejs';
次に、LaTeavel 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
tomcatサービスvue-routerのhistoryモードの構成方法
スクラッチカスタムview実装