Pasang Shadcn/ui dengan Laravel + React❤️

Pada masa ini terdapat banyak rangka kerja CSS seperti Bootstrap, Bulma, UI Semantik dll. yang boleh mempercepatkan membina paparan (antara muka pengguna). Salah satu alatan CSS yang sedang menjadi sohor kini ialah Shadcn/ui Apakah itu sebelum ini?

Di laman web rasminya Shadcn/ui menyatakan

“koleksi komponen boleh guna semula yang boleh kami salin dan tampal ke dalam apl kami.”

Jadi shadcn/ui ialah koleksi komponen boleh guna semula dalam paparan, dibina menggunakan TailwindCSS dan RadixUI. Pada masa ini ia menyokong beberapa rangka kerja seperti Next.js, Laravel dan sebagainya. boleh dilihat di laman web rasmi Shadcn/ui.

Daripada banyak rangka kerja yang disokong. Matlamat utama kami ialah cara memasang Shadcn/ui pada Laravel React, menggunakan Laravel Breeze.

Langkah pertama: pasang projek laravel.

laravel new laravel-shadcn

Di sini kami menggunakan pemasang Laravel (global). Pada peringkat seterusnya kita akan diminta untuk memilih pilihan seperti dalam imej di bawah

Isi mengikut keperluan projek anda. Jika ya, tunggu sehingga pemasangan selesai. Kelajuan pemasangan bergantung pada sambungan internet anda.

Pemasangan projek Laravel telah selesai. OK Teruskan!.

Langkah kedua: Memasang Shadcn/ui pada projek Laravel

Masih di terminal yang sama. Mula-mula, taip arahan di bawah:

cd laravel-shadcn
npx shadcn-ui@latest init

Jika ya, permintaan akan muncul dan isikannya mengikut keperluan anda. seperti contoh berikut.

Would you like to use TypeScript (recommended)? no 
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › resources/css/app.css
Do you want to use CSS variables for colors? › yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/Components
Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › no

Jika anda seorang pengguna skrip taip maka anda boleh memilih ya, OK, Seterusnya. Pergi ke vscode atau mengikut editor kod kegemaran anda. di sini saya menggunakan vscode kemudian hanya gunakan arahan berikut

cd laravel-shadcn

code .

Ia akan secara automatik membuka vscode serta membuka projek laravel anda. Jika ya, langkah seterusnya ialah membuka fail app.css dalam folder sumber/css/app.css untuk memastikan shadcnui telah berjaya dipasang dalam projek Laravel kami.

Dalam gambar di atas shadcn telah berjaya dipasang pada projek Laravel kami.

Penjelasan:

• Shadcn akan mengemas kini fail app.css secara automatik
• Apabila kita memerlukan komponen seperti butang, makluman, jadual, dsb. maka kami perlu memasangnya melalui terminal akar projek laravel anda. (Memerlukan sambungan internet)
• Semua komponen yang anda perlukan boleh dilihat di laman web rasmi ShadcnUI
• Apabila anda selesai memasang komponen, ia akan menjana fail baharu secara automatik dalam folder resources/js/Components/ui/Button.jsx. Kami juga boleh mengubah suai fail ini mengikut kehendak kami.

Langkah ketiga: Pastikan Shadcn dipasang
Untuk memastikan bahawa ShadcnUI telah dipasang, kami boleh memberikan arahan dalam terminal. iaitu sebagai contoh, kita akan memasang komponen butang, arahannya ialah: npx shadcn-ui@butang tambah terkini boleh dilihat pada imej di bawah

Kemudian buka fail Welcome.jsx dan ikuti seperti dalam imej di bawah.

Jika ya. buka dua Terminal dengan direktori yang sama, iaitu laravel-shadcn

Terminal 1

npm run dev

Terminal 2

php artisan serve

Kemudian bukanya dalam penyemak imbas dan komponen butang akan muncul yang lalai berwarna gelap.

Atas ialah kandungan terperinci Pasang Shadcn/ui dengan Laravel + React❤️. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!