ວິທີການໃຊ້ Laravel ກັບ Vue.js 3

Vue.js ແມ່ນໜຶ່ງໃນກອບ JavaScript ທີ່ໃຊ້ຫຼາຍທີ່ສຸດໃນການສ້າງການໂຕ້ຕອບເວັບ ແລະແອັບພລິເຄຊັນໜ້າດຽວ, ພ້ອມກັບ Laravel ມັນກາຍເປັນເຄື່ອງມືພັດທະນາທີ່ມີປະສິດທິພາບຫຼາຍ.

ສໍາລັບການພັດທະນາແອັບຯເວັບ, ເຄື່ອງມືທີ່ໃຊ້ຢ່າງກວ້າງຂວາງແມ່ນ vuejs, ແລະໃນບົດຄວາມນີ້ພວກເຮົາຈະເບິ່ງວິທີການຕິດຕັ້ງແລະໃຊ້ມັນກັບ Laravel. ໂຄງຮ່າງການ Vue.js ແມ່ນ defiນິໂຕ ໂຄງ​ຮ່າງ​ການ​ກ້າວ​ຫນ້າ​ ເນື່ອງຈາກວ່າມັນມີຄວາມຊ່ຽວຊານໃນການສ້າງມຸມເບິ່ງ HTML, ແລະຊ່ວຍໃຫ້ທ່ານສາມາດປະສົມປະສານກັບອົງປະກອບຂອງຫ້ອງສະຫມຸດແລະໂຄງການອື່ນໆໄດ້ຢ່າງງ່າຍດາຍ.

ຄວາມສໍາເລັດຂອງ Vue.js ຍັງເຊື່ອມຕໍ່ກັບທາງເລືອກຂອງ Laravel ເພື່ອແນະນໍາມັນເປັນກອບດ້ານຫນ້າ, ດັ່ງນັ້ນຈຶ່ງນໍາໄປສູ່ການປ່ອຍເວີຊັນ 2.0.

ການສ້າງໂຄງການ Laravel

ຂັ້ນຕອນທໍາອິດແມ່ນ, ແນ່ນອນ, ເພື່ອສ້າງໂຄງການໃຫມ່ໃນ Laravel. ຖ້າທ່ານມີຫນຶ່ງຢູ່ໃນຄອມພິວເຕີຂອງທ່ານ, ໃຊ້ມັນຫຼືທ່ານສາມາດສ້າງອັນໃຫມ່ສໍາລັບການສອນນີ້.

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

ຫຼັງຈາກໂຄງການໄດ້ເລີ່ມຕົ້ນ, ທ່ານຈະຕ້ອງຕິດຕັ້ງ npm ສິ່ງເສບຕິດ. ເພື່ອເຮັດສິ່ງນີ້, ດໍາເນີນການຄໍາສັ່ງຕໍ່ໄປນີ້ພາຍໃນໄດເລກະທໍລີໂຄງການຂອງທ່ານ:

npm install

ເມື່ອການຕິດຕັ້ງ dependencies, ດໍາເນີນການຄໍາສັ່ງຕໍ່ໄປນີ້ເພື່ອລວບລວມຊັບພະຍາກອນແລະໃຫ້ແນ່ໃຈວ່າທຸກສິ່ງທຸກຢ່າງເຮັດວຽກຈິງ:

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ກໍານົດບາງຕົວກໍານົດການຂອງຄໍາຮ້ອງສະຫມັກ, ເຊັ່ນ: ຂໍ້ມູນແລະພຶດຕິກໍາ, ໃນກໍລະນີຂອງພວກເຮົາ:

• el: ອ້າງອີງເຖິງອົງປະກອບ div definited ໃນ html
• ຂໍ້ມູນ: ຊຸດຂໍ້ມູນ

ທັນທີທີ່ວັດຖຸຖືກສ້າງຂຶ້ນ, Vue ໄດ້ມາ div ຂອບກົດລະບຽບ id vue-app ແລະດູແລການປ່ຽນແທນຕົວຍຶດບ່ອນ {{ text }} ດ້ວຍຄ່າທີ່ມີຢູ່ໃນວັດຖຸຂໍ້ມູນ. ແນ່ນອນ, ວັດຖຸນີ້ສາມາດມີຫຼາຍກວ່າຫນຶ່ງຊັບສິນ, ເຖິງແມ່ນວ່າປະເພດຕ່າງໆ: ຕົວເລກ, arrays ແລະວັດຖຸທີ່ຊ້ອນກັນອື່ນໆແມ່ນຖືກຕ້ອງ.

ນອກເຫນືອຈາກການທົດແທນນີ້, Vue ຍັງໄດ້ເປີດໃຊ້ເຄື່ອງຈັກຂອງມັນແລະເຮັດໃຫ້ຄໍາຮ້ອງສະຫມັກຕອບສະຫນອງ, i.e. ການປ່ຽນແປງໃດໆກັບຄຸນສົມບັດຂໍ້ຄວາມຈະເຮັດໃຫ້ເກີດການປັບປຸງທັນທີຂອງອົງປະກອບທີ່ສອດຄ້ອງກັນໃນ 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 ການຜະລິດ. ຟັງຊັນຍອມຮັບວັດຖຸທີ່ທ່ານສາມາດເຮັດໄດ້ definite ສະບັບຂອງ Vue.js ທີ່ທ່ານກໍາລັງໃຊ້. 

ຫຼັງຈາກດັດແກ້ໄຟລ໌ webpack.mix.js ທ່ານຈໍາເປັນຕ້ອງລວບລວມລະຫັດ JavaScript. ເພື່ອເຮັດສິ່ງນີ້, ພວກເຮົາດໍາເນີນການຄໍາສັ່ງອີກເທື່ອຫນຶ່ງ 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!, ເປັນຜົນມາຈາກຕົວຢ່າງ Vue.js ຖືກຕິດຕັ້ງຢູ່ໃນອົງປະກອບ HTML ກັບ id app.

ດໍາເນີນການຄໍາຮ້ອງສະຫມັກຂອງທ່ານໂດຍໃຊ້ php artisan serve, ແລະເປີດມັນຢູ່ໃນຕົວທ່ອງເວັບທີ່ທ່ານມັກ.

Ercole Palmeri

ທ່ານອາດຈະສົນໃຈ ...

• ຜູ້ໃຫ້ບໍລິການໃນ Laravel: ພວກເຂົາແມ່ນຫຍັງແລະວິທີການນໍາໃຊ້ຜູ້ໃຫ້ບໍລິການໃນ Laravel
• ວິທີການຕິດຕັ້ງ ChatGPT ຢູ່ໃນຄອມພິວເຕີຂອງທ່ານ
• ວິທີການປັບແຕ່ງການພິມໂຄງການ Gantt ໃນ Microsoft Project
• ໂຄງຮ່າງການໃນວິສະວະກໍາຊອບແວແມ່ນຫຍັງ, defiຄໍານິຍາມແລະປະເພດຂອງກອບ
• ນີ້ແມ່ນຄວາມຕັ້ງໃຈດິຈິຕອນທໍາອິດມາ blockchain