วิธีใช้ Laravel กับ Vue.js 3

Vue.js เป็นหนึ่งในเฟรมเวิร์ก JavaScript ที่ใช้มากที่สุดสำหรับการสร้างเว็บอินเตอร์เฟสและแอปพลิเคชันหน้าเดียว เมื่อรวมกับ Laravel มันจะกลายเป็นเครื่องมือพัฒนาที่ทรงพลังมาก

สำหรับการพัฒนาเว็บแอป เครื่องมือที่ใช้กันอย่างแพร่หลายคือ vuejs และในบทความนี้ เราจะมาดูวิธีการติดตั้งและใช้งานกับ Laravel กรอบงาน Vue.js คือ defiNito กรอบก้าวหน้า เนื่องจากมีความเชี่ยวชาญในการสร้างมุมมอง HTML และช่วยให้คุณสามารถรวมเข้ากับส่วนประกอบของไลบรารีและโปรเจ็กต์อื่นๆ ได้อย่างง่ายดาย

ความสำเร็จของ Vue.js เกิดจากการเลือกใช้ Laravel เพื่อแนะนำให้เป็นเฟรมเวิร์กส่วนหน้า จึงนำไปสู่การเปิดตัวเวอร์ชัน 2.0

การสร้างโปรเจ็กต์ Laravel

ขั้นตอนแรกคือการสร้างโครงการใหม่ใน Laravel หากคุณมีคอมพิวเตอร์ของคุณ ให้ใช้หรือสร้างใหม่สำหรับบทช่วยสอนนี้โดยเฉพาะ

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

หลังจากเริ่มโครงการแล้ว คุณจะต้องติดตั้ง npm การเสพติด ในการทำเช่นนี้ ให้เรียกใช้คำสั่งต่อไปนี้ภายในไดเร็กทอรีโครงการของคุณ:

npm install

เมื่อติดตั้งการพึ่งพาแล้ว ให้รันคำสั่งต่อไปนี้เพื่อสร้างทรัพยากรและตรวจสอบให้แน่ใจว่าทุกอย่างใช้งานได้จริง:

npm run dev

คำสั่ง npm run dev ดำเนินการตรวจสอบและสร้างโดยเฉพาะอย่างยิ่ง Laravel Mix รวบรวมไฟล์ resources/js/app.js และไฟล์ resources/css/app.css ในไฟล์ public/js/app.js e public/css/app.css.

เมื่อเสร็จสิ้นหากทุกอย่างทำงานได้ดีคุณจะเห็นสิ่งนี้:

การติดตั้ง Vue.js

หลังจากเตรียมโปรเจ็กต์ Laravel แล้ว เราสามารถดำเนินการติดตั้ง Vue.js 3 ได้ โดยเรียกใช้คำสั่งต่อไปนี้ในไดเร็กทอรีโปรเจ็กต์ของคุณ:

npm install --save-dev vue

สิ่งนี้จะติดตั้ง Vue.js เป็นหนึ่งในการพึ่งพาการพัฒนา หลังจากคอมไพล์เนื้อหาแล้ว ไฟล์ JavaScript ที่ใช้งานจริงของคุณจะอยู่ในตัวเอง ดังนั้นคุณเพียงแค่ต้องติดตั้ง Vue.js เพื่อใช้ในการพัฒนา

เพื่อให้แน่ใจว่าติดตั้ง Vue 3 อย่างถูกต้อง ให้เปิดไฟล์ package.json (มีอยู่ในรูทโปรเจ็กต์) และค้นหา "vue" ในส่วน "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"
    }
}

อย่างที่คุณเห็น หมายเลขเวอร์ชันระบุว่า Vue.js 3 ได้รับการติดตั้งแล้ว 

ลอง Vue.js ครั้งแรก

ในไฟล์ welcome.blade.php ของคุณ ให้ใส่โค้ดต่อไปนี้:

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

อย่างที่คุณเห็น เราได้สร้างองค์ประกอบ div กับ id "vue-app“. ภายในองค์ประกอบ script เราได้สร้างอินสแตนซ์ของ Vue โดยที่เราส่งต่อไปยังตัวสร้างวัตถุที่ช่วยให้เราสามารถทำได้ defiปรับปรุงพารามิเตอร์แอปพลิเคชันบางตัว เช่น ข้อมูลและพฤติกรรม ในกรณีของเรา:

• เอล: การอ้างอิงถึงองค์ประกอบ div defiเสร็จสิ้นใน html
• วันที่: ชุดข้อมูล

ทันทีที่มีการสร้างวัตถุ Vue ซื้อกิจการ div กับ id vue-app และดูแลการเปลี่ยนตัวยึด {{ text }} ด้วยค่าที่มีอยู่ในวัตถุข้อมูล แน่นอนว่าอ็อบเจกต์นี้สามารถมีมากกว่าหนึ่งคุณสมบัติ แม้จะเป็นประเภทต่างๆ ก็ตาม: ตัวเลข อาร์เรย์ และอ็อบเจกต์ซ้อนอื่นๆ นั้นถูกต้อง

นอกจากการแทนที่นี้แล้ว Vue ยังได้เปิดใช้งานเอ็นจินและทำให้แอปพลิเคชันตอบสนอง เช่น การเปลี่ยนแปลงคุณสมบัติข้อความจะทำให้องค์ประกอบที่เกี่ยวข้องใน HTML อัปเดตทันที

การทดสอบครั้งที่สองของ Vue.js

หากต้องการดำเนินการทดลองใช้ครั้งที่สอง ขั้นแรกคุณต้องสร้างอินสแตนซ์แอปเพื่อสร้างส่วนประกอบใหม่ คุณเปิด resources/app.js (o resources/js/app.js) และปรับปรุงเนื้อหาดังต่อไปนี้:

// resources/app.js

require('./bootstrap');

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

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

ในไฟล์นี้ เรากำลังสร้างอินสแตนซ์ Vue.js ใหม่ และในการทำเช่นนี้ เราจำเป็นต้องมีส่วนประกอบ Vue ซึ่งเราเรียกว่า HelloVue.vue สำหรับข้อมูลเพิ่มเติม ปรึกษาเอกสารราชการ . 

สร้างไฟล์ใหม่ resources/components/HelloVue.vue และป้อนรหัสต่อไปนี้:

// resources/components/HelloVue.vue

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

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

ไฟล์ที่เราเพิ่งสร้างเป็นคอมโพเนนต์ Vue.js พื้นฐานที่พิมพ์ Hello Vue! อย่างไร header1 ในหน้า ในที่สุดเปิด webpack.mix.js ไฟล์ในรูทโปรเจ็กต์และอัพเดตเนื้อหาดังนี้:

// 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', [
        //
    ]);

ในไฟล์นี้ วิธีการเรียก .vue() จะคอมไพล์โค้ด Vue.js และรวมไว้ในไฟล์ JavaScript ที่ใช้งานจริง ฟังก์ชั่นยอมรับวัตถุที่คุณทำได้ defiเป็นเวอร์ชันของ Vue.js ที่คุณใช้อยู่ 

หลังจากแก้ไขไฟล์ webpack.mix.js คุณต้องรวบรวมโค้ดจาวาสคริปต์ ในการทำเช่นนี้ เราเรียกใช้คำสั่งอีกครั้ง npm run dev.

สุดท้าย หากต้องการลองใช้ Vue ให้เปิดไฟล์ resources/views/welcome.blade.php และป้อนรหัสต่อไปนี้:

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

โค้ดพร้อมกับคอมโพเนนต์ที่สร้างไว้ก่อนหน้านี้จะสร้างข้อความวิดีโอ สวัสดีวิว!เนื่องจากอินสแตนซ์ Vue.js ถูกเมาท์บนองค์ประกอบ HTML ด้วย id app.

เรียกใช้แอปพลิเคชันของคุณโดยใช้ php artisan serveแล้วเปิดในเบราว์เซอร์ที่คุณชื่นชอบ

Ercole Palmeri

คุณอาจสนใจ ...

• ผู้ให้บริการใน Laravel: คืออะไรและจะใช้ผู้ให้บริการใน Laravel อย่างไร
• วิธีติดตั้ง ChatGPT ในเครื่องคอมพิวเตอร์ของคุณ
• วิธีปรับแต่งการพิมพ์โครงการ Gantt ใน Microsoft Project
• Framework ในวิศวกรรมซอฟต์แวร์คืออะไร defiความหมายและประเภทของกรอบงาน
• เจตจำนงดิจิทัลตัวแรกมาพร้อมกับ blockchain