PHP (Laravel) and VUEJS

Giới thiệu

Hiện nay đang có khá là nhiều Framework JS vd như là React.js, Embre.js, Angular.js, ... khá là nhiều. Tất nhiên mỗi Framework đều có những cái hay riêng của nó bạn nào thích Framework nào thì có thể tiềm hiểu. Riêng bản thân mình là một tín đồ của LaravelLaravel đã tích hợp một Framework JS rất mạnh mẽ hiện nay đó là Vue.js. Sau khi tìm hiểu và áp dụng vào Project thì mình cảm thấy rất tuyệt nên quyết định viết bài này để hướng dẫn mọi người cách cài đặt VueJS và Laravel với một Example đơn giản.

Chuẩn bị

Trước tiên tất nhiên bạn đã có môi trường để thực hiện việc cài đặt, nếu bạn nào còn lăng tăng về việc cài đặt môi trường thì có thể tham khảo bài viết của mình, tới đây thì mình mặc định các bạn đã có môi trường phù hợp rồi nhé.

Thực hiện

Cài đặt Laravel
composer require laravel/laravel laravel-vuejs
Cài đặt Vuejs

Mở Terminal và cd vào root của project laravel

npm install

Sau khi tải các gói thư viện javascript về, thư mục node_modules sẽ xuất hiện, nơi các toàn bộ các thư viện javascript mà chúng ta cài đặt qua npm. Như vậy là chúng ta đã hoàn thành việc cài đặt vuejs cho project.

Nhìn qua trong /resources/js, ta thấy app.js, bootstrap.js và thư mục components mà laravel đã chuẩn bị sẵn. Bootstrap.js là file mồi để khởi động ứng dụng của chúng ta, nạp một số thư viện global cần thiết. Code vuejs của chúng ta sẽ thực hiện trong thự mục js, chúng ta sẽ chia nhỏ view thành các component để quản lý và phát triển chúng dễ dàng hơn.

Tiếp theo chúng ta mở file resources/views/welcome.blade.php và paste đoạn code bên dưới vào

<!doctype html>
<html lang="{{config('app.locale')}}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{config('app.name')}}</title>
    <link rel="stylesheet" href="{{mix('css/app.css')}}">

    <script>
        window.Laravel = {!! json_encode(['csrfToken' => csrf_token()]) !!};
    </script>
</head>
<body>
    <div id="app">
        <!-- Sử dụng component Example.vue -->
        <example-component></example-component>
    </div>

    <script src="{{mix('js/app.js')}}"></script>
</body>
</html>

Mình sẽ giải thích nhừng thành phần chính sử dụng Vuejs trong đoạn code này

<div id="app">
    <!-- Sử dụng component Example.vue -->
    <example-component></example-component>
</div>

example-component chính là tên component chúng ta đăng ký trong file app.js và các component phải nằm trong Tag cha với id là app

{{mix('js/app.js')}} là thư viện build từ code của component và các thư viện của javascript.

Chúng ta mở file resources/js/components/ExampleComponent.vue và thêm vào đoạn code dưới đây

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-default">
                    <div class="card-header">Happy coding!</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

Sau khi save file này lại thì các bạn nhớ chạy lên dưới này để build phần code mình đã thay đổi trong component nhé

npm run dev

Nếu bạn không chạy lệnh này thì vuejs sẽ không build phần code mình đã thay đổi trong file component đâu nhé.

Đợi cho vuejs build xong thì chúng ta access vào project trên Browser và ghi nhận thành quả nhé

Chú ý

Trong quá trình Dev vuejs chúng ta không thể cứ mỗi lần thay đổi code trong component lại npm run dev như vậy khá tốn time nên trước khi viết code vuejs bạn chạy lệnh sau

npm run watch

khi bạn thay đổi và save bất kì những thay đổi nào trên file component thì hệ thống sẽ tự động build ra file app.js cho bạn rất tiện lợi phải không.

Khi tạo thêm file component trong folder components thì bạn nhớ đăng ký vào file app.js để vuejs nhận biết nhé theo format bên dưới

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

Kết luận

Tới đây bạn đã có thể tạo 1 component đơn giản include vào view của Laravel rồi. Nếu các bạn là một tín đồ của Laravel thì các bạn nên học thêm về vueJS một Framework JS mạnh mẽ được Laravel tích hợp vào. Happy coding!

Posted in PHP on Jan 20, 2019