JavaScript & CSS

Giới thiệu

Laravel không bắt buộc bạn phải dùng JavaScript hoặc CSS pre-processors, nó cung cấp BootstrapVue sẽ rất hữu ích cho ứng dụng của bạn. Mặc định, Laravel sử dụng NPM để cài đặt cả hai package đó.

CSS

Laravel Elixir khá rõ ràng, nó dùng để biên dịch SASS hoặc Less, nó là những plain CSS mà bạn có thể thêm biến, mixins, và một số tích năng khác khi làm việc với CSS mà bạn sẽ rất thích.

Trong tài liệu này, nói chung chúng ta sẽ bàn luận về biên soạn CSS; tuy nhiên, bạn nên tham khảo Laravel Elixir documentation để biết thêm thông tin biên dịch SASS hoặc Less.

JavaScript

Laravel không bắt buộc bạn phải sử dụng JavaScript framework nào hoặc thư viện để xây dựng ứng dụng. Thực tế, bạn sẽ không phải tất cả đều sử dụng JavaScript. Tuy nhiên, Laravel thêm một số scaffolding để bắt đầu dễ dàng hơn cho việc viết một JavaScript sử dụng thư viện Vue. Vue cung cấp một expressive API cho việc xây dựng JavaScript applications sử dụng components.

Viết CSS

File package.json của Laravel gồm bootstrap-sass package để cho bạn bắt đầu xây dựng thuộc tính frondend ứng dụng của bạn sử dụng Bootstrap. Tuy nhiên, feel bạn có thể thoải mái thêm hoặc xóa packages from từ file package.json fnếu cần thiết cho ứng dụng. Bạn không cần phải sử dụng Bootstrap framework để xây dựng ứng dụng của bạn - nó đơn giản chỉ là cung cấp cho bạn một khởi đầu tối để cho những người cần sử dụng nó.

Trước khi biên soạn CSS, bạn cần phải cài frontend dependencies sử dụng NPM:

npm install

Khi dependencies đã được cài đặt, sử dụng npm install, bạn có thể biên dịch file SASS sang plain CSS bằng cách Gulp. Lệnh gulp command sẽ thực hiện hướng dẫn trong file gulpfile.js. Thông thường, file CSS dã được biên dịch sẽ nằm trong thư mục public/css:

gulp

Mặc định file gulpfile.js và Laravel đã biên dịch file resources/assets/sass/app.scss SASS. File app.scss thêm một file SASS variables và tải Bootstrap, nó cung cấp một điểm bắt đầu tốt cho phát triển ứng dụng. Bạn có thể thoải mái tùy biến file app.scss tuy nhiên nếu bạn muốn, bạn có thể sử dụng một pre-processor khác bởi cấu hình Laravel Elixir.

Viết JavaScript

Tất cả các yêu cầu JavaScript dependencies của bạn có thể tìm thấy ở trong file package.json trong thư mục gốc của project. File này giống với file composer.json ngoại trừ nó chỉ JavaScript dependencies thay thế các PHP dependencies. Bạn có thể cài đặt dependencies bằng cách sử dụng Node package manager (NPM):

npm install

Mặc định, File package.json của Laravel bao gồm một số package như vuevue-resource giúp bạn bắt đầu xây dựng ứng dụng JavaScript application. Bạn có thể thoải mái thêm hoặc xóa từ file package.json nếu cần cho ứng dụng của bạn.

Khi packages đã được cài đặt, bạn có thể sử dụng lệnh gulp để biên dịch file. Gulp là một command-line xây dựng hệ thống JavaScript. Khi bạn chạy lệnh gulp, Gulp sẽ thực thi theo hướng dẫn của file gulpfile.js:

gulp

Mặc định, File gulpfile.js của Laravel biên dịch file SASS và file resources/assets/js/app.js. Bên trong file app.js bạn có thể đăng ký Vue components hoặc, nếu bạn thích framework khác, bạn có thể cấu hình JavaScript. File biên dịch JavaScript thương sẽ được lưu ở trong thư mục public/js.

File app.js sẻ chứa file resources/assets/js/bootstrap.js gồm bootstraps và cấu hình Vue, Vue Resource, jQuery, và tất cả những JavaScript dependencies. Nếu bạn muốn thêm JavaScript dependencies vào cấu hình, bạn có thể thêm nó ở trong file này.

Viết Vue Components

Mặc định, ứng dụng Laravel chứa một Example.vue Vue component trong thư mục resources/assets/js/components. File Example.vue là một ví dụ về single file Vue component nó định nghĩa JavaScript và HTML template trong the same file. Single file components cung cấp 1 cách tiện lợi cho việc tiếp cận và xây dựng ứng dụng JavaScript. Ví dụ component đã được đăng ký trong file app.js:

Vue.component('example', require('./components/Example.vue'));

Để sử dụng component trong ứng dụng của bạn, bạn có thể để nói trong 1 file HTML templates. Ví dụ, sau khi chạy lệnh make:auth Artisan của scaffold để tạo chức năng đăng nhập và đăng ký cho ứng dụng của bạn, bạn có thể vứt component trong home.blade.php Blade template:

@extends('layouts.app')

@section('content')
    <example></example>
@endsection

Nhớ rằng, bạn nên chạy lệnhgulp command mỗi khi bạn thay đổi một Vue component. Hoặc, bạn có thể chạy lệnh gulp watch trong terminal và nó sẽ tự động biên dịch compnents cho bạn mỗi khi chúng được thay đổi.

Tất nhiên, nếu bạn hứng thú trong việc học Vue components, bạn có thể đọc nó tại Vue documentation, nó là tài liệu rất tốt, dễ có cái nhìn tổng quan về Vue framework.

Nguồn: https://laravel.com/docs/5.3/frontend