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

Thiết lập Vue, Vuex, Vue-Router & Sass trong Laravel 8. Devjavu

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ì…

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 Example.vue trong thư mục tài nguyên/nội dung/js/thành phần. Bạn quyết định có muốn sử dụng nó hay không

Hỗ trợ sử dụng React đã được giới thiệu trong phiên bản 5. 5, bằng cách cho phép bạn sử dụng để xóa hoặc đặt cài đặt trước giàn giáo giao diện người dùng mà bạn thích

php artisan preset react

laravel new laravel-vue-minimal

0

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

những gì bạn có thể tìm thấy nếu bạn thử truy cập các trang này trong các phiên bản sau. Sự thay thế?

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/UI

Luồ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

• Làn gió Laravel
• Laravel Jetstream

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-loader

Thiế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/
  - Components
  - Mixins
  - Pages
  - Router
  - Store
  - Styles
  App.vue
  app.js
  bootstrap.js

Bạn nên có một cái gì đó như thế này bây giờ

tài nguyên/js

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ó

tài nguyên/js/Bộ định tuyến/tuyến. js

Ở đâ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

tài nguyên/js/Bộ định tuyến/chỉ mục. js

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

tài nguyên/js/Lưu trữ/chỉ mục. js

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 nguyên/js/ứng dụng. js

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

tài nguyên/js/Ứng dụng. vue

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

tài nguyên/js/Thành phần/Thanh điều hướng. vue

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]

tài nguyên/js/Trang/Giới thiệu. vue

tài nguyên/js/Trang/Trang chủ. vue

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]

Ghi chú. Chúng tôi chủ yếu làm điều này vì tính thẩm mỹ, mục đích của hướng dẫn này là thiết lập Vue từ đầu trong Laravel, vì vậy hãy thoải mái tạo kiểu cho các thành phần của bạn theo cách bạn muốn

Chúng tôi thêm một số kiểu dáng cho cơ thể

tài nguyên/js/Kiểu/ứng dụng. scss

Bên dưới, chúng tôi tạo kiểu cho thẻ h1 và lớp navBar

tài nguyên/js/Kiểu/ứng dụng. scss

Và cuối cùng, chúng tôi tạo kiểu cho nút

tài nguyên/js/Kiểu/ứng dụng. scss

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 Laravel

Chú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

tài nguyên/lượt xem/chào mừng. lưỡi. php

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

tuyến đường/web. php

Đó 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

máy chủ cục bộ. 8000

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]

Quá lười biếng để tự mình hoàn thành toàn bộ quá trình thiết lập?

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?

Phiên bản PHP nào tốt nhất cho Laravel 8?

Làm cách nào để cài đặt vue 3 trong Laravel 8?

Làm cách nào để cài đặt gói Laravel UI trong Laravel 8?