Morioh
Login
CODE VN

CODE VN

9 months ago

Cách cài đặt Vue 3 trong Laravel 9 từ đầu

Vue.js là một khung JavaScript tiến bộ để xây dựng giao diện người dùng. Nó nhẹ, linh hoạt và dễ học. Vue có thể được sử dụng để xây dựng các trang web đơn giản hoặc các ứng dụng một trang phức tạp.

Hướng dẫn này sẽ hướng dẫn bạn cách cài đặt Vue 3 trong Laravel 9 từ đầu. Vue 3 là một khung JavaScript phổ biến để xây dựng giao diện người dùng và Laravel 9 là một khung PHP phổ biến để xây dựng các ứng dụng web. 

Để cài đặt Vue 3 trong Laravel 9 từ đầu, hãy làm theo các bước sau.

  • Bước 1: Cài đặt dự án Laravel
  • Bước 2: Cài đặt Vue 3
  • Bước 3: Cập nhật Laravel Mix
  • Bước 4: Tạo thành phần Vue 3
  • Bước 5: Nhập Vue vào tệp app.js
  • Bước 6: Thêm thành phần Vue 3 vào tệp Laravel Blade
  • Bước 7: Chạy lệnh phát triển để biên dịch tài sản Javascript

Bước 1: Cài đặt dự án Laravel

Đầu tiên, mở Terminal và chạy lệnh sau để tạo một dự án laravel mới:

#! /bin/bash
composer create-project --prefer-dist laravel/laravel laravel-vue3

hoặc, nếu bạn đã cài đặt Trình cài đặt Laravel làm phần phụ thuộc của trình soạn thảo toàn cầu:

#! /bin/bash
laravel new laravel-vue3

Bước 2: Cài đặt Vue 3

Trong bước này, chúng ta cần cài đặt Vue 3 và các phần phụ thuộc của nó:

#! /bin/bash
npm install --save vue@next && npm install --save-dev vue-loader@next

Bước 3: Cập nhật Laravel Mix

Mở webpack.mix.jsvà thêm .vue() phương thức như tôi đã thêm vào đoạn mã dưới đây:

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

Bước 4: Tạo thành phần Vue 3

Tạo một tệp có tên  Welcome.vue trong  /resources/js/components thư mục và thêm đoạn mã sau vào tệp này:

<template>
    <h1>{{ title }}</h1>
</template>
<script>
export default {
    setup: () => ({
        title: 'How To Install Vue 3 in Laravel 9 From Scratch'
    })
}
</script>

Bước 5: Nhập Vue vào tệp app.js

Mở resources/js/app.jsvà cập nhật đoạn mã sau vào tệp đó:

require('./bootstrap')

import { createApp } from 'vue'
import Welcome from './components/Welcome'

const app = createApp({})

app.component('welcome', Welcome)

app.mount('#app')

Bước 6: Thêm thành phần Vue 3 vào tệp Laravel Blade

Bây giờ trong bước này, chúng ta cần thêm các thành phần js và Vue 3 vào tệp phiến.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">

        <!-- Styles -->
        <style>
            /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}a{background-color:transparent}[hidden]{display:none}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}*,:after,:before{box-sizing:border-box;border:0 solid #e2e8f0}a{color:inherit;text-decoration:inherit}svg,video{display:block;vertical-align:middle}video{max-width:100%;height:auto}.bg-white{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.bg-gray-100{--bg-opacity:1;background-color:#f7fafc;background-color:rgba(247,250,252,var(--bg-opacity))}.border-gray-200{--border-opacity:1;border-color:#edf2f7;border-color:rgba(237,242,247,var(--border-opacity))}.border-t{border-top-width:1px}.flex{display:flex}.grid{display:grid}.hidden{display:none}.items-center{align-items:center}.justify-center{justify-content:center}.font-semibold{font-weight:600}.h-5{height:1.25rem}.h-8{height:2rem}.h-16{height:4rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.leading-7{line-height:1.75rem}.mx-auto{margin-left:auto;margin-right:auto}.ml-1{margin-left:.25rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1rem}.ml-4{margin-left:1rem}.mt-8{margin-top:2rem}.ml-12{margin-left:3rem}.-mt-px{margin-top:-1px}.max-w-6xl{max-width:72rem}.min-h-screen{min-height:100vh}.overflow-hidden{overflow:hidden}.p-6{padding:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.pt-8{padding-top:2rem}.fixed{position:fixed}.relative{position:relative}.top-0{top:0}.right-0{right:0}.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.text-center{text-align:center}.text-gray-200{--text-opacity:1;color:#edf2f7;color:rgba(237,242,247,var(--text-opacity))}.text-gray-300{--text-opacity:1;color:#e2e8f0;color:rgba(226,232,240,var(--text-opacity))}.text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.text-gray-500{--text-opacity:1;color:#a0aec0;color:rgba(160,174,192,var(--text-opacity))}.text-gray-600{--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity))}.text-gray-700{--text-opacity:1;color:#4a5568;color:rgba(74,85,104,var(--text-opacity))}.text-gray-900{--text-opacity:1;color:#1a202c;color:rgba(26,32,44,var(--text-opacity))}.underline{text-decoration:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.w-5{width:1.25rem}.w-8{width:2rem}.w-auto{width:auto}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}@media (min-width:640px){.sm\:rounded-lg{border-radius:.5rem}.sm\:block{display:block}.sm\:items-center{align-items:center}.sm\:justify-start{justify-content:flex-start}.sm\:justify-between{justify-content:space-between}.sm\:h-20{height:5rem}.sm\:ml-0{margin-left:0}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:pt-0{padding-top:0}.sm\:text-left{text-align:left}.sm\:text-right{text-align:right}}@media (min-width:768px){.md\:border-t-0{border-top-width:0}.md\:border-l{border-left-width:1px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.lg\:px-8{padding-left:2rem;padding-right:2rem}}@media (prefers-color-scheme:dark){.dark\:bg-gray-800{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.dark\:bg-gray-900{--bg-opacity:1;background-color:#1a202c;background-color:rgba(26,32,44,var(--bg-opacity))}.dark\:border-gray-700{--border-opacity:1;border-color:#4a5568;border-color:rgba(74,85,104,var(--border-opacity))}.dark\:text-white{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.dark\:text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.dark\:text-gray-500{--tw-text-opacity:1;color:#6b7280;color:rgba(107,114,128,var(--tw-text-opacity))}}
        </style>

        <style>
            body {
                font-family: 'Nunito', sans-serif;
            }
        </style>
    </head>
    <body class="antialiased">
        <div id="app">
            <div class="relative flex items-top justify-center min-h-screen bg-gray-100 sm:items-center py-4 sm:pt-0">
                <welcome/>
            </div>
        </div>

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

Bước 7: Chạy lệnh phát triển để biên dịch tài sản Javascript

#! /bin/bash
npm run watch

Chạy  php artisan serve và kiểm tra http://localhost:8000

Chúc mừng mã hóa!!!

1.05 GEEK