Vite là công cụ front-end mới cho Laravel. Hãy xem cách chúng ta có thể làm cho nó hoạt động tốt hơn cùng với Laravel Livewire
Vite là Next Generation Frontend Tooling,, mặc định của Laravel từ giờ trở đi. Tôi đã viết một bài về cách di chuyển trang web Laravel Webpack sang Vite
Hôm nay, hãy xem cách chúng ta có thể cùng nhau cải thiện hoạt động với Livewire và Vite bằng cách sử dụng Plugin Vite Livewire của Fabio Ivona
Sự cần thiết
Khi làm việc với Laravel Livewire, các component của chúng ta thường có các trạng thái khác nhau, tùy thuộc vào dữ liệu hiện tại
Mỗi khi chúng tôi thay đổi tệp phiến của thành phần và làm mới, all states are gone, và thành phần được đặt thành mặc định
Đây là nơi Plugin Vite Livewire có thể giúp chúng tôi. Nó tự động làm mới các thành phần Livewire và keeps trạng thái hiện tại của nó
Hình ảnh. Biểu mẫu gửi này là một thành phần Livewire từ trang web Larastreamers
Cài đặt
Cài đặt gói
npm install --save-dev @defstudio/vite-livewire-plugin
Sau đó, thêm plugin Vite mới vào tệp vite.config.js của bạn
import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';
import livewire from '@defstudio/vite-livewire-plugin'; // Here we import it
export default defineConfig[{
plugins: [
laravel[[
'resources/css/app.css',
'resources/js/app.js',
]],
livewire[{ // Here we add it to the plugins
refresh: ['resources/css/app.css'],
}],
],
}];
Và cuối cùng, thêm trình quản lý tải lại vào tệp JavaScript chính của bạn
//..
import { livewire_hot_reload } from 'virtual:livewire-hot-reload'
livewire_hot_reload[];
Không, chúng tôi có thể khởi động Vite đến hết npm run dev, và bạn sẽ thấy thông báo trên bảng điều khiển cho biết plugin Vite Livewire đã được bật thành công. Điều này có nghĩa là bạn đã sẵn sàng để đi
Ghi chú. Xin lưu ý rằng nếu bạn đã định cấu hình Vite để tự động làm mới các tệp phiến, thì điều này sẽ xung đột với plugin này
Cách sử dụng
Bây giờ, mỗi khi bạn thay đổi tệp phiến của thành phần Livewire hoặc lớp thành phần, nó sẽ automatically refreshed while keeping the state. Khá mát mẻ, phải không?
Điều này cực kỳ hữu ích, đặc biệt đối với các thành phần mở rộng hơn như các biểu mẫu lớn có nhiều trường nhập liệu. Khi bạn kiểm tra chúng ngay bây giờ, bạn không phải nạp lại tất cả dữ liệu
Để biết thêm chi tiết, vui lòng kiểm tra tài liệu plugin chính thức. Chúc bạn vui vẻ và cảm ơn Fabio Ivona
Đối với dân lập trình javascript thì có lẽ auto reload khi file thay đổi có lẽ đã quen thuộc. Nhưng còn trong laravel hoặc trong các tệp blade thì sao?. Câu trả lời là có, nó có thể, giống như các tệp javascript, php hoặc blade trong laravel cũng có thể tự động tải lại khi có thay đổi đối với tệp. Laravel sử dụng hỗn hợp laravel để hỗ trợ nó
Chức năng tự động tải lại khá hữu ích cho các lập trình viên, vì trình duyệt sẽ tự động phản hồi các thay đổi nên chúng ta không cần tải lại trang trình duyệt. Nếu bạn áp dụng điều này, tất nhiên điều này sẽ làm cho công việc dễ dàng hơn. Phương pháp khá dễ dàng, hãy làm theo các bước dưới đây
Cách tạo Tự động tải lại khi tệp thay đổi trong Laravel1. Lập dự án laravel với phiên bản laravel đã hỗ trợ laravel mix. Laravel mix đã có trên phiên bản 5. 4+. Nhưng mình khuyên nên dùng laravel version 7+ để tránh lỗi.
2. Hãy chắc chắn rằng bạn đã cài đặt nút js. Nhấp vào liên kết sau để tải xuống nút. js. https. //nodejs. tổ chức/vi/
3. Chạy lệnh bên dưới để tải xuống một số phụ thuộc cần thiết
cài đặt npm
4. Mở gói web. pha trộn. js và thêm đoạn script bên dưới
pha trộn. browserSync['127. 0. 0. 1. 8000'];
5. Chạy các lệnh bên dưới để tải xuống các phụ thuộc đồng bộ hóa trình duyệt và đồng bộ hóa trình duyệt-webpack-plugin
đồng hồ chạy npm
6. Chạy lại lệnh bên dưới, lần này lệnh bên dưới sẽ chạy máy chủ ảo
đồng hồ chạy npm
Sau khi câu lệnh trên được thực thi thì một lúc sau bạn sẽ tự động được chuyển đến trình duyệt với url http. //máy chủ cục bộ. 3000. Ok, bây giờ tải lại tự động của bạn đang hoạt động. Hãy thử thay đổi tệp lưỡi cắt và xem kết quả
Để mã hóa của bạn nhanh hơn nữa, bạn phải bật tính năng lưu tự động trong mã phòng thu trực quan. Vì vậy, khi bạn chỉnh sửa một tệp, tệp sẽ tự động được lưu và trình duyệt sẽ tự động tải lại. Bạn sẽ cảm thấy hạnh phúc hơn, mạnh mẽ hơn, nhanh hơn và hiệu quả hơn. Làm theo hình bên dưới để kích hoạt auto save on vs code