Forum dạng SPA với Laravel và Vue.js – Phần 1: Xây dựng khung dự án

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.

Các bài viết nên tham khảo khi bắt đầu thực hiệ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-forum

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

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>

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.

7 thoughts on “Forum dạng SPA với Laravel và Vue.js – Phần 1: Xây dựng khung dự án

  1. Ad ơi nó bị lỗi này là làm sao vậy
    (2/2) ErrorException
    The Mix manifest does not exist. (View: E:\xampp\htdocs\spa-forum\resources\views\welcome.blade.php)

  2. Bị lỗi này sao ad ?
    app.js Failed to load resource: the server responded with a status of 404 (Not Found)
    app.css Failed to load resource: the server responded with a status of 404 (Not Found)

  3. Vũ Đức Hồng

    - Edit

    Reply

    cái cuối cùng phải là example-component chứ ad
    cái này phải xem trong app.js xem nó đặt tên component là gì

Add Comment