نسخه:

داربست جاوا اسکریپت و CSS

معرفی

در حالی که لاراول دیکته نمی کند که از کدام پیش پردازنده های جاوا اسکریپت یا CSS استفاده کنید، اما با استفاده از Bootstrap ، React ، و/یا Vue نقطه شروع اولیه ای را ارائه می دهد که برای بسیاری از برنامه ها مفید خواهد بود. به طور پیش فرض، لاراول از NPM برای نصب هر دوی این بسته های فرانت اند استفاده می کند.

داربست Bootstrap و Vue ارائه شده توسط لاراول در laravel/ui بسته Composer قرار دارد که ممکن است با استفاده از Composer نصب شود: 

composer require laravel/ui:^2.4

پس از laravel/ui نصب بسته، می توانید داربست جلویی را با استفاده از ui دستور Artisan نصب کنید: 

// Generate basic scaffolding...
php artisan ui bootstrap
php artisan ui vue
php artisan ui react
 
// Generate login / registration scaffolding...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

CSS

Laravel Mix یک API تمیز و گویا را در کامپایل SASS یا Less ارائه می‌کند، که پسوندهای CSS ساده هستند که متغیرها، میکس‌ها و سایر ویژگی‌های قدرتمند را اضافه می‌کنند که کار با CSS را بسیار لذت‌بخش‌تر می‌کند. در این سند، به طور خلاصه درباره کامپایل CSS به طور کلی بحث خواهیم کرد. با این حال، برای کسب اطلاعات بیشتر در مورد کامپایل SASS یا کمتر، باید به اسناد کامل Laravel Mix مراجعه کنید.

جاوا اسکریپت

لاراول نیازی به استفاده از چارچوب یا کتابخانه خاص جاوا اسکریپت برای ساخت برنامه های خود ندارد. در واقع، شما اصلا نیازی به استفاده از جاوا اسکریپت ندارید. با این حال، لاراول دارای تعدادی داربست اولیه است تا شروع به نوشتن جاوا اسکریپت مدرن با استفاده از کتابخانه Vue را آسان‌تر کند . Vue یک API رسا برای ساخت برنامه های جاوا اسکریپت قوی با استفاده از کامپوننت ها ارائه می دهد. مانند CSS، ما ممکن است از Laravel Mix برای کامپایل آسان اجزای جاوا اسکریپت در یک فایل جاوا اسکریپت آماده برای مرورگر استفاده کنیم.

نوشتن CSS

پس از نصب laravel/ui پکیج Composer و تولید داربست frontend ، فایل لاراول package.json شامل این bootstrap بسته می‌شود تا به شما کمک کند تا نمونه‌سازی اولیه ظاهر برنامه خود را با استفاده از Bootstrap آغاز کنید. package.json با این حال، در صورت نیاز برای برنامه خود بسته هایی را از فایل اضافه یا حذف کنید . شما نیازی به استفاده از چارچوب بوت استرپ برای ساخت برنامه لاراول خود ندارید - به عنوان یک نقطه شروع خوب برای کسانی که استفاده از آن را انتخاب می کنند ارائه شده است.

قبل از کامپایل CSS خود، وابستگی های فرانت اند پروژه خود را با استفاده از Node Package Manager (NPM) نصب کنید : 

npm install

هنگامی که وابستگی ها با استفاده از نصب شدند npm install ، می توانید فایل های SASS خود را با استفاده از Laravel Mix در CSS ساده کامپایل کنید . دستور npm run dev دستورات موجود در webpack.mix.js فایل شما را پردازش می کند. به طور معمول، CSS کامپایل شده شما در دایرکتوری قرار می گیرد public/css : 

npm run dev

فایل webpack.mix.js همراه با داربست جلویی لاراول، resources/sass/app.scss فایل SASS را کامپایل می کند. این app.scss فایل فایلی از متغیرهای SASS را وارد می‌کند و Bootstrap را بارگذاری می‌کند، که نقطه شروع خوبی برای اکثر برنامه‌ها فراهم می‌کند. به راحتی می توانید app.scss فایل را به دلخواه شخصی سازی کنید یا حتی از یک پیش پردازنده کاملاً متفاوت با پیکربندی Laravel Mix استفاده کنید .

نوشتن جاوا اسکریپت

همه وابستگی های جاوا اسکریپت مورد نیاز برنامه شما را می توان در package.json فایل موجود در فهرست اصلی پروژه یافت. این فایل شبیه یک composer.json فایل است با این تفاوت که به جای وابستگی های PHP، وابستگی های جاوا اسکریپت را مشخص می کند. می توانید این وابستگی ها را با استفاده از Node Package Manager (NPM) نصب کنید : 

npm install

به طور پیش فرض، فایل لاراول package.json شامل چند بسته مانند lodash و axios برای کمک به شما در شروع ساخت برنامه جاوا اسکریپت است. package.json به راحتی می توانید فایل را در صورت نیاز برای برنامه خود اضافه یا حذف کنید .

پس از نصب بسته ها، می توانید از npm run dev دستور برای کامپایل دارایی های خود استفاده کنید . Webpack یک بسته ماژول برای برنامه های کاربردی جاوا اسکریپت مدرن است. هنگامی که دستور را اجرا می کنید npm run dev ، Webpack دستورالعمل های موجود در webpack.mix.js فایل شما را اجرا می کند: 

npm run dev

به طور پیش فرض، فایل لاراول webpack.mix.js SASS و resources/js/app.js فایل شما را کامپایل می کند. در app.js فایل می‌توانید اجزای Vue خود را ثبت کنید یا اگر چارچوب دیگری را ترجیح می‌دهید، برنامه جاوا اسکریپت خود را پیکربندی کنید. جاوا اسکریپت کامپایل شده شما معمولاً در دایرکتوری قرار می گیرد public/js .

فایل app.js فایلی را بارگیری می کند resources/js/bootstrap.js که Vue، Axios، jQuery و سایر وابستگی های جاوا اسکریپت را بوت استرپ و پیکربندی می کند. اگر وابستگی های اضافی جاوا اسکریپت برای پیکربندی دارید، می توانید این کار را در این فایل انجام دهید.

نوشتن اجزای Vue

هنگام استفاده از laravel/ui بسته برای داربست جلویی خود، یک ExampleComponent.vue جزء Vue در دایرکتوری قرار می گیرد resources/js/components . این ExampleComponent.vue فایل نمونه‌ای از یک جزء فایل Vue است که قالب جاوا اسکریپت و HTML خود را در همان فایل تعریف می‌کند. اجزای فایل منفرد یک رویکرد بسیار راحت برای ساخت برنامه های کاربردی مبتنی بر جاوا اسکریپت ارائه می کنند. جزء مثال در app.js فایل شما ثبت شده است: 

Vue.component(
    'example-component',
    require('./components/ExampleComponent.vue').default
);

برای استفاده از مؤلفه در برنامه خود، می توانید آن را در یکی از قالب های HTML خود قرار دهید. به عنوان مثال، پس از اجرای php artisan ui vue --auth دستور Artisan برای ایجاد داربست روی صفحه‌های احراز هویت و ثبت برنامه، می‌توانید کامپوننت را در home.blade.php قالب Blade رها کنید: 

@extends('layouts.app')
 
@section('content')
    <example-component></example-component>
@endsection

به یاد داشته باشید، باید npm run dev هر بار که یک جزء Vue را تغییر می دهید، دستور را اجرا کنید. یا، می‌توانید npm run watch دستور نظارت و کامپایل خودکار اجزای خود را هر بار که هر بار اصلاح می‌شوند، اجرا کنید.

اگر علاقه مند به یادگیری بیشتر در مورد نوشتن اجزای Vue هستید، باید مستندات Vue را مطالعه کنید ، که یک نمای کلی کامل و آسان برای خواندن کل چارچوب Vue ارائه می دهد.

با استفاده از React

اگر ترجیح می دهید از React برای ساخت برنامه جاوا اسکریپت خود استفاده کنید، لاراول جایگزینی داربست Vue را با داربست React می کند: 

composer require laravel/ui
 
// Generate basic scaffolding...
php artisan ui react
 
// Generate login / registration scaffolding...
php artisan ui react --auth

اضافه کردن تنظیمات از پیش تعیین شده

تنظیمات از پیش تنظیم شده "macroable" هستند، که به شما امکان می دهد متدهای اضافی را در زمان اجرا به کلاس اضافه کنید UiCommand . به عنوان مثال، کد زیر یک nextjs متد به UiCommand کلاس اضافه می کند. به طور معمول، شما باید ماکروهای از پیش تعیین شده را در یک ارائه دهنده خدمات اعلام کنید : 

use Laravel\Ui\UiCommand;
 
UiCommand::macro('nextjs', function (UiCommand $command) {
    // Scaffold your frontend...
});

سپس، می توانید از طریق ui دستور، پیش تنظیم جدید را فراخوانی کنید: 

php artisan ui nextjs