Forum dạng SPA với Laravel và Vue.js – Phần 1: Xây dựng khung dự án
NỘI DUNG BÀI VIẾT
Việc đầu tiên khi bắt tay vào một dự án ứng dụng đơn trang SPA là thiết lập khung dự án, bao gồm việc cài đặt cơ bản Laravel, cài đặt các gói cần thiết trong cấu hình Laravel Mix, cài đặt các gói thư viện hỗ trợ trong Vue.js như vue-router, vuex và thiết lập Vue component cho trang đầu tiên.
1. Cài đặt Laravel
Bạn có thể tham khảo qua cách Cài đặt nhanh Laravel trên Windows, vì đa phần ở Việt Nam chúng ta quá giàu nên toàn xài hệ điều hành Windows. OK, chúng ta tạo một dự án Laravel thông qua composer
composer create-project laravel/laravel spa-forum
hoặc thông qua laravel nếu bạn đã cài đặt gói laravel toàn cục
laravel new spa-forumCode language: JavaScript (javascript)Bạn dùng cách nào cũng được, ở đây tôi sử dụng cách đầu tiên:
c:\xampp\htdocs>composer create-project laravel/laravel spa-forum Installing laravel/laravel (v5.4.21) - Installing laravel/laravel (v5.4.21): Loading from cache Created project in spa-forum > php -r "file_exists('.env') || copy('.env.example', '.env');" Loading composer repositories with package information Updating dependencies (including require-dev) ... Writing lock file Generating autoload files > Illuminate\Foundation\ComposerScripts::postUpdate > php artisan optimize Generating optimized class loader The compiled services file has been removed. > php artisan key:generate Application key [base64:T4ewxYqOrSVAF+sDj3yK3Hog10TOd5/3uDj4lj60u4s=] set successfully.
Ok, như vậy chúng ta đã có một dự án mẫu Laravel, mặc định Laravel 5.4 đã đưa vào một ứng dụng mẫu cho Vue.js (resources/assets/js) và sử dụng Laravel Mix để thực hiện biên dịch, đóng gói, minify tài nguyên. Chú ý: bạn cũng nên tạo một tên miền ảo cục bộ giúp cho đường dẫn trông đẹp hơn, trong loạt bài viết này chúng tôi thiết lập tên miền ảo cục bộ là http://spa-forum.dev. ## 2. Cài đặt và thiết lập view welcome
Như đã nói ở phần đầu, chúng ta xây dựng diễn đàn dạng ứng dụng đơn trang, do đó trong bước tiếp theo này sẽ thực hiện cài đặt các gói thư viện Javascript liên quan như Vue.js, axios, vue-router… Laravel Mix đã cấu hình sẵn các gói cần thiết, bạn chỉ cần thực hiện lệnh npm install để cài đặt:
c:\xampp\htdocs\spa-forum>npm install
[ ................] - fetchMetadata: sill mapToRegistry uri http://registry.np
...Code language: JavaScript (javascript)npm chạy khá chậm chạp, bạn có thể mất khoảng 10 phút, hoặc bạn có thể sử dụng yarn sẽ nhanh hơn. Ok, bạn đã cài đặt xong các thư viện cần thiết được cấu hình sẵn trong Laravel Mix, tiếp đến chúng ta thiết lập view mặc định welcome để nó dùng ứng dụng mẫu Vue.js đi cùng. Thay đổi resources/views/welcome.balde.php như sau:
<!DOCTYPE html>
<html lang="vi VN">
<head>
<meta charset="utf-8">
<title>SPA Forum - Allaravel.com</title>
<!-- Main styles for this application -->
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
<meta id="csrf-token" name="csrf-token" value="{{ csrf_token() }}">
</head>
<body>
<div id="app">
<example></example>
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>Code language: HTML, XML (xml)Sau đó, thực hiện build các tài nguyên javascript và css bằng cách thực hiện lệnh npm run dev. Sau đó vào thử http://spa-forum.dev bạn sẽ thấy giao diện có nội dung của resources/assets/js/components/Example.vue. Nếu bạn chưa biết về Vue.js hãy tham khảo các bài viết về Vue trước khi thực hiện.
Bước tiếp theo là gì?
Như vậy chúng ta đã thiết lập xong khung dự án cho ứng dụng SPA Forum, khung dự án là rất quan trọng, khi bạn đã xây dựng được khung này, các dự án tiếp theo chúng ta hoàn toàn có thể tạo lại một cách đơn giản. Bước tiếp theo, chúng ta sẽ bàn luận chi tiết về thiết lập đường dẫn, tạo các nội dung con hay xử lý các lỗi routing và lỗi 404 không tìm thấy trang yêu cầu.
Cảm ơn các bạn đã đọc.
Các bạn có thể tham khảo các bài viết hay về Laravel tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
Nguồn tham khảo: Allaravel
Leave a Reply