Php artisan cài sẵn Vue Laravel 8
Đọc bài viết này ở chế độ tối, dễ dàng sao chép và dán các mẫu mã và khám phá thêm các nội dung như thế này trên Devjavu Show
Thiết lập Vue, Vuex, Vue-Router & Sass trong Laravel 8. DevjavuNền tảng của Laravel cho cả phát triển giao diện người dùng và phụ trợ đã phát triển trong một vài phiên bản phát hành trước đây. Vì…devjavu. không gian Nền tảng của Laravel cho cả phát triển giao diện người dùng và phụ trợ đã phát triển trong một vài phiên bản phát hành trước đây. Ví dụ: khi xác thực giàn giáo trong Laravel 4 & 5, chúng tôi sẽ sử dụng cách cũ tốt “make. lệnh xác thực”; . Lệnh này tạo ra khá nhiều hệ thống xác thực cơ bản, bao gồm các tuyến, chế độ xem và bộ điều khiển cần thiết để đăng ký, đăng nhập và khôi phục mật khẩu Tất nhiên, điều này thuận tiện nếu bạn định sử dụng Blade cho lượt xem và SSR của mình, nhưng đôi khi không phải vậy. Giả sử bạn có ý định xây dựng một SPA với thư viện Javascript yêu thích của mình, nhưng vẫn muốn tất cả những điều tốt đẹp của Laravel Cho đến Laravel 5. 3, Blade là tùy chọn tiếp theo để hoàn thiện giao diện người dùng của bạn trong Laravel. Sự hỗ trợ cho Vue. js trong 5. 3 đã giới thiệu việc sử dụng các thành phần Vue trong ứng dụng Laravel của bạn, theo mặc định, Laravel đã tạo một thành phần
Luồng này đã bị ngừng trong các phiên bản sau, chính xác là phiên bản 6. x Trong Laravel 6. x, gói laravel new laravel-vue-minimal 1 đã được giới thiệu để làm cho các ứng dụng giao diện người dùng Javascript trong Laravel trở nên dễ dàng hơn, với sự hỗ trợ cho Vue, React & Bootstrap. Việc thiết lập khá đơn giản (mặc dù đây không phải là lộ trình chúng tôi sẽ thực hiện. ). Bạn có thể kiểm tra tài liệu chính thức để tìm hiểu về giàn giáo với gói Laravel/UILuồng này cũng đã bị ngừng trong phiên bản 8. Tuy nhiên, nó tương thích ngược, có nghĩa là ngay cả khi bạn đang sử dụng phiên bản 8 của Laravel, bạn vẫn có thể tạo một ứng dụng vue bằng cách sử dụng gói Laravel/UI Sự thay thế? Bộ công cụ dành cho người mới bắt đầu LaravelĐây là các tùy chọn giàn giáo hiện được hỗ trợ… nếu chúng không thay đổi nó với bản phát hành chính tiếp theo. Ở đây, có hai lựa chọn cho giàn giáo
Với Laravel Breeze, những gì nhóm Laravel đã làm là tách biệt “make. auth” thành một gói riêng biệt, nhưng lần này, các mẫu Blade được tạo sẽ được tạo kiểu bằng Tailwind CSS chứ không phải Bootstrap được sử dụng trước đây. Vì chúng tôi không giao dịch với Blade nên tùy chọn này không áp dụng cho chúng tôi ngay bây giờ Tùy chọn thứ hai; . Không, chúng tôi cũng sẽ không đi tuyến đường Jetstream, tại sao? Nó đầy hơi Những gì chúng tôi muốn là một thiết lập Laravel + Vue ở mức tối thiểu nhất, giống như những gì bạn nhận được khi tạo một ứng dụng vue với vue CLI Bây giờ chúng tôi biết các tùy chọn chúng tôi có, những gì chúng tôi muốn và tại sao chúng tôi muốn nó. Bắt đầu nào Bắt đầu Trước tiên, hãy đảm bảo cli Laravel của bạn được cập nhật. Vì một số lý do, lỗi này xuất hiện đối với các phiên bản lỗi thời Cập nhật phiên bản Laravel của bạn với composer global require laravel/installer Tiếp theo giàn giáo một ứng dụng Laravel laravel new laravel-vue-minimal Khi đã xong, hãy mở dự án trong trình chỉnh sửa mã, mở gói. json, hãy tìm và thay thế mọi phiên bản của npm bằng yarn. Bạn có thể bỏ qua bước này nếu muốn tiếp tục sử dụng npm. Chúng tôi chỉ làm điều này để chúng tôi có thể cài đặt các gói bằng sợi thay vì NPM, một quyết định chủ yếu dựa trên sở thích Đối tượng tập lệnh của bạn sẽ trông như thế này (Một số phần chưa chỉnh sửa được lược bỏ) "scripts": { "dev": "yarn run development", "watch": "yarn run development --watch", "watch-poll": "yarn run watch --watch-poll", "prod": "yarn run production",},if left unchanged it should have npm commands only:"scripts": {"dev": "npm run development","watch": "npm run development --watch","watch-poll": "npm run watch --watch-poll","prod": "npm run production",}, Tiếp theo, chúng tôi sẽ cài đặt các gói bằng cách nhập lệnh sợi trong thiết bị đầu cuối yarnor using npm npm i Chúng tôi cũng cần cài đặt một số gói cần thiết dưới dạng phần phụ thuộc của nhà phát triển yarn add -D vue vue-template-compiler vue-router vuex sass sass-loaderor using npm npm install --save-dev vue vue-template-compiler vue-router vuex sass sass-loaderThiết lập Vue Hãy tạo một cấu trúc thư mục Vue cơ bản, nằm bên trong thư mục resource/js. Cấu trúc thư mục của chúng tôi sẽ trông giống như thế này js/ Bạn nên có một cái gì đó như thế này bây giờ Tiếp theo, chúng tôi sẽ thiết lập Vue-Router Trong thư mục Bộ định tuyến, tạo hai tệp “tuyến đường. js” và “chỉ mục. js”. Trong các tuyến đường. js, chúng tôi sẽ thiết lập một loạt các tuyến đường và xuất nó Ở đây chúng tôi đang xác định nhà và về các tuyến đường và ánh xạ chúng tới các thành phần tương ứng của chúng - Trang chủ. vue và Giới thiệu. vue (chúng ta sẽ tạo sau một chút). Tiếp theo, chúng tôi sẽ thiết lập một phiên bản Bộ định tuyến Vue trong chỉ mục. js (trong thư mục Bộ định tuyến) và xuất phiên bản Tiếp theo, Vuex Chúng tôi sẽ thiết lập một cửa hàng Vuex, thêm thuộc tính trạng thái "đếm" và một đột biến mà chúng tôi sẽ cam kết sau để cập nhật thuộc tính đếm. Trong thư mục Store, tạo một chỉ mục. js và thiết lập kho lưu trữ Vuex như vậy Nếu bạn đã làm việc với Vuex trước đây, điều này sẽ trông quen thuộc. Nếu không, bạn có thể kiểm tra tài liệu Bây giờ chúng ta có thể thiết lập tệp nhập của mình, điều này tương đương với tệp chính. js bạn nhận được khi tạo ứng dụng vue với vue-cli. Chúng tôi sẽ tìm thấy tệp nhập này trong. /resource/js/ứng dụng. js. Ở đây chúng ta sẽ tìm thấy một tệp gần như trống rỗng với bootstrap. nhập js ở trên cùng. Để nguyên trạng thái nhập, chúng tôi sẽ thiết lập phiên bản Vue của chúng tôi bên dưới nó. Nhập cửa hàng Vuex và phiên bản bộ định tuyến vue vào ứng dụng. js, sau đó chuyển nó vào đối tượng Vue Tại thời điểm này, chúng ta có thể thiết lập tất cả các thành phần cần thiết. ứng dụng. vue là thành phần đầu vào như bạn có thể đã thấy trong thiết lập phiên bản vue của chúng tôi, vì vậy chúng tôi sẽ có thành phần xem bộ định tuyến ở đây Thêm thanh điều hướng. vue trong thư mục js/Components, vì chúng tôi đã nhập nó vào Ứng dụng. thành phần vue. Nó sẽ giống như thế này Chúng ta sẽ tạo kiểu này sau Trong thư mục Trang, chúng tôi sẽ thêm Giới thiệu. thành phần vue và Trang chủ. thành phần vue tương ứng. (Chúng tôi đã sử dụng chúng trong tuyến đường của chúng tôi. tập tin js) Trong thành phần Trang chủ, chúng tôi đang sử dụng trình trợ giúp mapState để lấy giá trị đếm từ đối tượng trạng thái của chúng tôi. Sau đó, chúng tôi đang thực hiện đột biến “TĂNG” khi nhấp vào nút. Chúng tôi cũng đang hiển thị giá trị đếm trong thẻ h1 Tiếp theo, chúng ta sẽ tạo kiểu cho các thành phần của mình. Tạo ứng dụng. scss trong thư mục Kiểu (Chúng tôi đã nhập tệp này trong Ứng dụng. tập tin vue)
Chúng tôi thêm một số kiểu dáng cho cơ thể Bên dưới, chúng tôi tạo kiểu cho thẻ h1 và lớp navBar Và cuối cùng, chúng tôi tạo kiểu cho nút Công việc của chúng ta đến đây là xong. Bây giờ chúng ta phải đảm bảo rằng Laravel có ý thức về thiết lập vue của chúng ta Cài đặt LaravelChúng tôi sẽ cập nhật lời chào mừng. lưỡi. tệp php trong tài nguyên/lượt xem. Đây là tệp mục nhập mà Laravel tự động tạo khi bạn tạo dự án Laravel mới. Xóa tất cả những gì bạn có ở đó và Cập nhật nội dung này Cuối cùng, chúng tôi sẽ cập nhật web. php trong thư mục tuyến đường và đặt tuyến đường bắt tất cả. Điều này tương tự như của bạn. htaccess khi bạn triển khai ứng dụng Vue lên máy chủ tĩnh. Lộ trình bắt tất cả sẽ giống như thế này Đó là nó Từ đây, bạn nên chạy Laravel-mix để xây dựng ứng dụng vue và khởi động máy chủ Laravel của bạn ________số 8_______Khởi động máy chủ Laravel php artisan serve Nếu mọi thứ suôn sẻ, bạn sẽ có thể xem ứng dụng vue (không có ý định chơi chữ) chạy trên cổng (8000)
Hãy xem repo Laravel-Vue-Minimal, đó là một giàn giáo tối thiểu cho Vue và Laravel, gần như mọi thứ trong hướng dẫn này Làm cách nào để sử dụng vuejs trong Laravel 8?Cách thiết lập và sử dụng Vue trong ứng dụng Laravel 8 của bạn . Tạo một ứng dụng Laravel mới. . Cài đặt gói trình soạn thảo laravel/ui $ trình soạn thảo yêu cầu laravel/ui Thiết lập giàn giáo Vue. . biên dịch các tập tin. . Bao gồm /js/ứng dụng. js trong tầm nhìn của bạn. . Thêm phần tử gốc vue vào HTML của bạn Phiên bản PHP nào tốt nhất cho Laravel 8?PHP 8. 0 . ấu trùng 9. x yêu cầu phiên bản PHP tối thiểu là 8. 0.
Làm cách nào để cài đặt vue 3 trong Laravel 8?Bước 1. Cài đặt dự án Laravel. . Bước 2. Cài đặt Vue 3. . Bước 3. Cập nhật hỗn hợp Laravel. . Bước 4. Tạo thành phần Vue 3. . Bước 5. Nhập Vue vào ứng dụng. tập tin js. . Bước 6. Thêm thành phần Vue 3 vào Laravel Blade File. . Bước 7. Chạy lệnh phát triển để biên dịch nội dung Javascript Làm cách nào để cài đặt gói Laravel UI trong Laravel 8?Cài đặt . Cd vào ứng dụng Laravel của bạn Nhập vào thiết bị đầu cuối của bạn. nhà soạn nhạc yêu cầu laravel/ui và nghệ nhân php ui vue --auth Cài đặt cài đặt trước này thông qua trình soạn thảo yêu cầu laravel-frontend-presets/nowui. . Chạy lệnh php artisan ui nowui để cài đặt sẵn Bảng điều khiển Now Ui. . Trong terminal của bạn chạy composer dump-autoload |