Cách sử dụng Laravel với Vue.js 3

Vue.js là một trong những khung JavaScript được sử dụng nhiều nhất để tạo giao diện web và ứng dụng trang đơn, cùng với Laravel, nó trở thành một công cụ phát triển rất mạnh mẽ.

Để phát triển các ứng dụng web, một công cụ được sử dụng rộng rãi là vuejs và trong bài viết này, chúng ta sẽ xem cách cài đặt và sử dụng nó với Laravel. Khung Vue.js là defiđinh tán khuôn khổ tiến bộ bởi vì nó chuyên tạo các dạng xem HTML và cho phép bạn dễ dàng tích hợp với các thành phần của các thư viện và dự án khác.

Sự thành công của Vue.js cũng là do sự lựa chọn của Laravel để đề xuất nó như một khuôn khổ giao diện người dùng, do đó dẫn đến việc phát hành phiên bản 2.0.

Tạo dự án Laravel

Tất nhiên, bước đầu tiên là tạo một dự án mới trong Laravel. Nếu bạn có một cái trên máy tính, hãy sử dụng nó hoặc bạn có thể tạo một cái mới chỉ dành cho hướng dẫn này.

composer create-project laravel/laravel guide-laravel-vue

Sau khi dự án đã bắt đầu, bạn sẽ cần phải cài đặt npm nghiện ngập. Để thực hiện việc này, hãy chạy lệnh sau trong thư mục dự án của bạn:

npm install

Khi các phần phụ thuộc được cài đặt, hãy chạy lệnh sau để tạo tài nguyên và đảm bảo mọi thứ thực sự hoạt động:

npm run dev

Lệnh npm run dev thực hiện một loạt các kiểm tra và xây dựng, đặc biệt Laravel Mix biên dịch tập tin resources/js/app.js và tập tin resources/css/app.css trong tập tin public/js/app.js e public/css/app.css.

Khi hoàn thành nếu mọi thứ hoạt động tốt, bạn sẽ thấy một cái gì đó như thế này:

Cài đặt Vue.js

Sau khi chuẩn bị dự án Laravel, chúng ta có thể tiến hành cài đặt Vue.js 3. Để thực hiện việc này, hãy chạy lệnh sau trong thư mục dự án của bạn:

npm install --save-dev vue

Thao tác này sẽ cài đặt Vue.js làm một trong các phụ thuộc phát triển. Sau khi biên dịch nội dung, tệp JavaScript sản xuất của bạn sẽ độc lập, vì vậy bạn chỉ cần cài đặt Vue.js làm phụ thuộc phát triển.

Để đảm bảo Vue 3 đã được cài đặt chính xác, hãy mở tệp package.json (có trong thư mục gốc của dự án) và tìm kiếm "vue" trong phần "devDependencies":

// package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vue": "^3.2.37"
    }
}

Như bạn có thể thấy, số phiên bản cho biết Vue.js 3 đã được cài đặt. 

Lần đầu thử Vue.js

Trong tệp welcome.blade.php của bạn, hãy đặt đoạn mã sau:

<div id="vue-app">
    {{ text }}
</div>
<script>
window.vueApp = new Vue({
  el: '#vue-app',
  data: {
    text: 'Hello World from Vue!'
  }
});
</script>

Như bạn có thể thấy, chúng tôi đã tạo một phần tử div với id "vue-app“. Bên trong phần tử tập lệnh, chúng tôi đã tạo một phiên bản của Vue, nơi chúng tôi chuyển đến hàm tạo một đối tượng cho phép chúng tôi defihoàn thành một số tham số ứng dụng, chẳng hạn như dữ liệu và hành vi, trong trường hợp của chúng tôi:

• el: Tham chiếu đến phần tử div defihoàn thành trong html
• ngày: tập dữ liệu

Ngay sau khi đối tượng được tạo, Vue mua lại div với id vue-app và quan tâm đến việc thay thế trình giữ chỗ {{ text }} với giá trị chứa trong đối tượng dữ liệu. Tất nhiên, đối tượng này có thể chứa nhiều hơn một thuộc tính, thậm chí thuộc các loại khác nhau: số, mảng và các đối tượng lồng nhau khác hợp lệ

Bên cạnh sự thay thế này, Vue cũng đã kích hoạt công cụ của nó và làm cho ứng dụng phản hồi nhanh, tức là bất kỳ thay đổi nào đối với thuộc tính văn bản sẽ gây ra cập nhật tức thời cho phần tử tương ứng trong HTML.

Thử nghiệm thứ hai của Vue.js

Để tiếp tục dùng thử lần thứ hai, trước tiên bạn cần khởi tạo ứng dụng để tạo một thành phần mới. bạn mở resources/app.js (o resources/js/app.js) và cập nhật nội dung của nó như sau:

// resources/app.js

require('./bootstrap');

import { createApp } from 'vue';
import HelloVue from '../components/HelloVue.vue';

createApp({
    components: {
        HelloVue,
    }
}).mount('#app');

Trong tệp này, chúng tôi đang tạo một phiên bản Vue.js mới và để làm điều này, chúng tôi cần một thành phần Vue mà chúng tôi đã gọi là HelloVue.vue. Để biết thêm thông tin tham khảo các tài liệu chính thức . 

Tạo một tệp mới resources/components/HelloVue.vue và nhập mã sau đây:

// resources/components/HelloVue.vue

<template>
  <h1>Hello Vue!</h1>
</template>

<script>
export default {
    name: 'HelloVue'
}
</script>

Tệp chúng tôi vừa tạo là một thành phần Vue.js cơ bản in Hello Vue! Đến header1 trên trang. Cuối cùng, mở webpack.mix.js trong thư mục gốc của dự án và cập nhật nội dung của nó như sau:

// webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .vue({
        version: 3,
    })
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

Trong tệp này, phương thức gọi .vue() sẽ biên dịch bất kỳ mã Vue.js nào và gói nó vào tệp JavaScript sản xuất. Hàm chấp nhận một đối tượng mà bạn có thể defihoàn thiện phiên bản Vue.js bạn đang sử dụng. 

Sau khi chỉnh sửa tệp webpack.mix.js bạn cần biên dịch mã javascript. Để làm điều này, chúng tôi chạy lại lệnh npm run dev.

Cuối cùng, để thử Vue hoạt động, hãy mở tệp resources/views/welcome.blade.php và nhập mã sau đây:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Laravel Vue</title>
    <script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body>
    <div id="app">
        <hello-vue />
    </div>
</body>
</html>

Mã này cùng với thành phần đã tạo trước đó sẽ tạo ra một thông báo video Xin chào Vũ!, do phiên bản Vue.js được gắn trên phần tử HTML với id app.

Chạy ứng dụng của bạn bằng cách sử dụng php artisan serve, và mở nó trong trình duyệt yêu thích của bạn.

Ercole Palmeri

Bạn cũng có thể quan tâm đến ...

• Nhà cung cấp dịch vụ trong Laravel: họ là gì và cách sử dụng Nhà cung cấp dịch vụ trong Laravel
• Cách cài đặt ChatGPT cục bộ trên máy tính của bạn
• Cách tùy chỉnh in dự án Gantt trong Microsoft Project
• Framework trong Công nghệ phần mềm là gì, defiđịnh nghĩa và các loại khung
• Đây là ý chí kỹ thuật số đầu tiên với blockchain