شروع کار با لاراول 7 - JavaScript & CSS Scaffolding

  • Introduction
  • Writing CSS
  • Writing JavaScript
    • Writing Vue Components
    • Using React
  • Adding Presets

مقدمه

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

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

composer require laravel/ui:

پس از نصب پکیج  laravel/ui، می توانید frontend scaffolding را با استفاده از دستور 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 بحث خواهیم کرد. با این وجود ، برای کسب اطلاعات بیشتر در مورد کامپایل SASS یا Less، باید مستندات کامل Laravel Mix را مطالعه کنید.

JavaScript

Laravel نیازی به استفاده از یک فریم ورک یا کتابخانه جاوا اسکریپت خاص برای ساخت برنامه های کاربردی شما ندارد. در حقیقت ، شما اصلاً لازم نیست از JavaScript استفاده کنید. با این حال ، Laravel شامل برخی از scaffolding های اساسی است تا بتوانید نوشتن JavaScript را با استفاده از کتابخانه Vue آسان تر کنید. Vue یک API صریح برای ساخت برنامه های کاربردی JavaScript با استفاده از کامپوننت ها فراهم می کند.مانند CSS ، ما میتونیم از Laravel Mix استفاده کنیم برای اینکه کامپوننت های JavaScript را به راحتی در یک فایل جاوا اسکریپت کامپایل کنید.

نوشتن CSS

پس از نصب پکیج laravel/ui Composer و ایجاد frontend scaffolding ، فایل pack.json لاراول حاوی پکیج bootstrap می شود تا به شما در شروع آماده سازی frontend برنامه خود با استفاده از Bootstrap کمک کند. با این حال ، در صورت نیاز برای برنامه های خود ، پکیج های فایل package.json را اضافه یا حذف کنید. شما نیازی به استفاده از Bootstrap framework برای ساخت برنامه Laravel ندارید، این به عنوان نقطه شروع خوبی برای کسانی که تصمیم به استفاده از آن می گیرند ارائه شده است.

قبل از کامپایل CSS خود ، وابستگیهای frontend پروژه خود را با استفاده از Node package manager  نصب کنید (npm):

npm install

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

npm run dev

فایل webpack.mix.js همراه با Laravel's frontend scaffolding فایل resources/sass/app.scss SASS را کامپایل می کند. فایل app.scss فایلی از متغیرهای SASS و لودهای Bootstrap را ایمپورت می کند که نقطه شروع خوبی برای اکثر برنامه ها است.. در صورت دلخواه می توانید فایل app.scss را customize کنید ،یا با پیکربندی Laravel Mix می توانید از یک pre-processor کاملاً متفاوت استفاده کنید.

نوشتنJavaScript

تمام dependency های JavaScript مورد نیاز برنامه را می توانید در فایل package.json در دایرکتوری root پروژه مشاهده کنید. این فایل مشابه فایل composer.json است به جز اینکه dependency های JavaScript را به جای dependency های PHP مشخص می کند. می توانید این dependency ها را با استفاده از NPM نصب کنید:

npm install

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

پس از نصب پکیج ها ، می توانید از دستور npm run dev برای کامپایل assets استفاده کنید. Webpack یک module bundler برای برنامه های مدرن JavaScript است. هنگامی که دستور npm run dev را اجرا می کنید ، Webpack دستورهای موجود در فایل webpack.mix.js را اجرا می کند:

npm run dev

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

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

نوشتن Vue Components

هنگام استفاده از پکیج های laravel / ui برای scaffold frontend ، یک Vue کامپوننت ExampleComponent.vue در دایرکتوری resources/js/components قرار می گیرد. فایل ExampleComponent.vue نمونه ای از یک کامپوننت Vue فایل است که تمپلیت JavaScript و HTML خود را در همان فایل تعریف می کند. file component ها  یک رویکرد بسیار مناسب برای ساخت برنامه های JavaScript ارائه می دهند. example component در فایل app.js رجیستر شده است:

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

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

@extends('layouts.app')

@section('content')
    
@endsection

نکته: به یاد داشته باشید ، هر بار که یک Vue component را تغییر دهید ، باید دستور npm run dev را اجرا کنید. یا میتوانید برای مانیتور یا recompile اتومات کامپوننت ها دستور npm run watch در هر بار modify، اجرا کنید.

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

استفاده از React

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


composer require laravel/ui

// Generate basic scaffolding...
php artisan ui react

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

اضافه کردن Presets

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

use Laravel\Ui\UiCommand;

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

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

php artisan ui nextjs
سعید نصیری
سعید نصیری

من برنامه نویس لاراول، PHP و طراح سایت هستم. برنامه نویسی موبایل و تولید اپلیکیشن های موبایل نیز بخش دیگری از توانایی های فردی من هست. تقریبا ده دوازده سالی تجربه مستمر در زمینه طراحی سایت دارم و نزدیک به یک سال هم میشه که در برنامه نویسی موبایل وارد شده ام.