Bagaimana untuk memperkenalkan UI bahagian hadapan dalam laravel

Dengan pembangunan berterusan aplikasi web dan peningkatan dalam keperluan pengguna, rangka kerja UI bahagian hadapan secara beransur-ansur menjadi bahagian penting dalam pembangunan aplikasi web. Di antara banyak pertandingan dalam bidang ini, Bootstrap dan Foundation ialah dua rangka kerja yang paling popular dan biasa diterima pakai. Walau bagaimanapun, kedua-dua rangka kerja mempunyai proses pemasangan dan konfigurasi yang agak membosankan yang memerlukan banyak masa dan usaha. Dalam rangka kerja Laravel, masalah ini diselesaikan dengan baik.

Laravel ialah rangka kerja aplikasi web PHP dan salah satu rangka kerja PHP paling popular pada masa ini. Rangka kerja Laravel menyepadukan sebilangan besar alatan, seperti alatan baris arahan Artisan, Eloquent ORM, templat Blade, dll. Alat ini membolehkan pembangun membina aplikasi web dengan cepat dan cekap. Selain itu, Laravel menyediakan cara mudah untuk memperkenalkan UI bahagian hadapan, termasuk Bootstrap dan Foundation. Di bawah, kami akan memperincikan cara memperkenalkan UI bahagian hadapan dalam aplikasi Laravel.

Memperkenalkan Bootstrap

Bootstrap ialah rangka kerja UI bahagian hadapan yang popular yang dibangunkan oleh Twitter dan sesuai untuk membina aplikasi web yang responsif dan mesra mudah alih. Dalam Laravel, memasang Bootstrap adalah pantas dan mudah dengan Composer.

Pertama, anda perlu memastikan aplikasi anda telah memasang Komposer. Kemudian pergi ke direktori aplikasi Laravel anda di terminal dan jalankan arahan berikut:

composer require twbs/bootstrap

Ini akan memuat turun dan memasang versi terbaharu Bootstrap ke dalam folder vendor projek anda.

Seterusnya, anda perlu memperkenalkan Bootstrap ke dalam aplikasi anda. Dalam Laravel anda boleh mencapai ini dengan mudah dengan langkah-langkah berikut.

1. Muat turun fail sumber ke dalam direktori awam anda (biasanya direktori awam).

php artisan vendor:publish --tag=bootstrap --force

Ini akan memuat turun CSS, JS dan fon Bootstrap ke dalam direktori awam/vendor/bootstrap anda.

2. Perkenalkan sumber Bootstrap dalam fail reka letak aplikasi anda (biasanya dalam teg 93f0f5c25f18dab9d176bd4f6de5d30e):

<link href="{{ asset('vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
<script src="{{ asset('vendor/bootstrap/js/bootstrap.min.js') }}"></script>

Versi semasa Bootstrap hanya menyokong jQuery, jadi anda perlu memastikan Anda telah memasang jQuery dalam aplikasi anda.

Memperkenalkan Yayasan

Yayasan ialah satu lagi rangka kerja UI bahagian hadapan yang popular dan pilihan yang baik untuk membina aplikasi web yang responsif dan mesra mudah alih. Seperti Bootstrap, memperkenalkan Foundation menggunakan Composer juga sangat mudah Operasi khusus adalah seperti berikut.

Pergi ke direktori aplikasi Laravel anda di terminal dan jalankan arahan berikut:

composer require zurb/foundation

Ini akan memuat turun dan memasang versi terbaharu Foundation ke dalam folder vendor projek anda.

Seterusnya, anda perlu memperkenalkan Foundation ke dalam aplikasi anda. Dalam Laravel anda boleh mencapai ini dengan mudah dengan langkah-langkah berikut.

1. Muat turun fail sumber ke dalam direktori awam anda (biasanya direktori awam).

php artisan vendor:publish --tag=foundation --force

Ini akan memuat turun CSS, JS dan fon Foundation ke dalam direktori awam/vendor/asas anda.

2. Perkenalkan sumber Foundation dalam fail susun atur aplikasi anda (biasanya dalam teg 93f0f5c25f18dab9d176bd4f6de5d30e):

<link href="{{ asset('vendor/foundation/css/foundation.min.css') }}" rel="stylesheet">
<script src="{{ asset('vendor/foundation/js/foundation.min.js') }}"></script>

Versi semasa Foundation menyokong jQuery dan Zepto, jadi anda perlu Pastikan anda telah memasang salah satu perpustakaan ini dalam aplikasi anda.

Ringkasan

Dalam artikel ini, kami memperkenalkan cara memperkenalkan UI bahagian hadapan dalam aplikasi Laravel. Bootstrap dan Foundation ialah rangka kerja yang diguna pakai secara meluas dalam pembangunan aplikasi web Ia menyediakan set komponen dan gaya yang kaya yang membolehkan pembangun membina aplikasi web yang responsif dan mesra mudah alih. Dalam Laravel, anda boleh menggunakan Komposer untuk memasang rangka kerja ini dengan mudah dan dengan mudah memperkenalkan fail sumber dalam aplikasi anda. Saya harap artikel ini dapat memberi anda bantuan dan panduan dalam proses membangunkan aplikasi web.

Atas ialah kandungan terperinci Bagaimana untuk memperkenalkan UI bahagian hadapan dalam laravel. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!