Paano gamitin ang Laravel sa Vue.js 3

Ang Vue.js ay isa sa mga pinaka ginagamit na JavaScript framevorks para sa paglikha ng mga web interface at solong page na application, kasama ng Laravel ito ay nagiging isang napakalakas na tool sa pag-unlad.

Para sa pagbuo ng mga web app, ang isang malawak na ginagamit na tool ay vuejs, at sa artikulong ito makikita natin kung paano i-install at gamitin ito sa Laravel. Ang Vue.js framework ay definito progresibong balangkas dahil ito ay dalubhasa sa paglikha ng mga HTML view, at nagbibigay-daan sa iyong madaling pagsamahin sa mga bahagi ng iba pang mga aklatan at proyekto.

Ang tagumpay ng Vue.js ay dahil din sa pagpili ng Laravel upang imungkahi ito bilang isang frontend framework, kaya humahantong sa paglabas ng bersyon 2.0.

Paglikha ng proyekto ng Laravel

Ang unang hakbang ay, siyempre, upang lumikha ng isang bagong proyekto sa Laravel. Kung mayroon kang isa sa iyong computer, gamitin ito o maaari kang lumikha ng bago para lamang sa tutorial na ito.

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

Matapos magsimula ang proyekto, kakailanganin mong i-install ang npm mga adiksyon. Upang gawin ito, patakbuhin ang sumusunod na command sa loob ng iyong direktoryo ng proyekto:

npm install

Kapag na-install na ang mga dependency, patakbuhin ang sumusunod na command upang buuin ang mga mapagkukunan at tiyaking gumagana talaga ang lahat:

npm run dev

Ang utos npm run dev nagsasagawa ng iba't ibang mga pagsusuri at pagbuo, sa partikular Laravel Mix i-compile ang file resources/js/app.js at ang file resources/css/app.css sa mga file public/js/app.js e public/css/app.css.

Kapag tapos na kung maayos ang lahat, makakakita ka ng ganito:

Pag-install ng Vue.js

Pagkatapos ihanda ang proyekto ng Laravel, maaari tayong magpatuloy sa pag-install ng Vue.js 3. Upang gawin ito, patakbuhin ang sumusunod na command sa iyong direktoryo ng proyekto:

npm install --save-dev vue

Ito ay mag-i-install ng Vue.js bilang isa sa mga dependency sa pag-develop. Pagkatapos i-compile ang mga asset, magiging self-contained ang iyong production JavaScript file, kaya kailangan mo lang i-install ang Vue.js bilang development dependency.

Upang matiyak na tama ang pagkaka-install ng Vue 3, buksan ang file package.json (naroroon sa ugat ng proyekto) at maghanap para sa "vue" sa seksyon "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"
    }
}

Gaya ng nakikita mo, ang numero ng bersyon ay nagpapahiwatig na ang Vue.js 3 ay na-install. 

Unang pagsubok ng Vue.js

Sa iyong welcome.blade.php file ilagay ang sumusunod na code:

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

Tulad ng nakikita mo, lumikha kami ng isang elemento div sa id "vue-app“. Sa loob ng elemento ng script lumikha kami ng isang halimbawa ng Vue, kung saan ipinapasa namin sa tagabuo ang isang bagay na nagpapahintulot sa amin na definish ilang mga parameter ng application, tulad ng data at pag-uugali, sa aming kaso:

• el: Sanggunian sa elemento div defitapos na sa html
• petsa: dataset

Sa sandaling malikha ang bagay, Vue nakakakuha ng div sa id vue-app at nangangalaga sa pagpapalit ng placeholder {{ text }} kasama ang halaga na nasa loob ng object ng data. Siyempre, maaaring maglaman ang object na ito ng higit sa isang property, kahit na may iba't ibang uri: valid ang mga numero, array at iba pang mga nested object.

Bukod sa pagpapalit na ito, na-activate din ng Vue ang makina nito at ginawang tumutugon ang application, ibig sabihin, ang anumang pagbabago sa text property ay magdudulot ng agarang pag-update ng kaukulang elemento sa HTML.

Pangalawang pagsubok ng Vue.js

Upang magpatuloy sa pangalawang pagsubok, kakailanganin mo munang i-instantiate ang app para gumawa ng bagong bahagi. Buksan mo resources/app.js (o resources/js/app.js) at i-update ang nilalaman nito gaya ng sumusunod:

// resources/app.js

require('./bootstrap');

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

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

Sa file na ito, lumilikha kami ng bagong halimbawa ng Vue.js, at para magawa ito kailangan namin ng bahagi ng Vue na tinawag naming HelloVue.vue. Para sa karagdagang impormasyon kumonsulta sa mga opisyal na dokumento . 

Gumawa ng bagong file resources/components/HelloVue.vue at ipasok ang sumusunod na code:

// resources/components/HelloVue.vue

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

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

Ang file na ginawa namin ay isang pangunahing bahagi ng Vue.js na nagpi-print Hello Vue! Dumating header1 sa pahina. Sa wakas, buksan ang webpack.mix.js file sa root ng proyekto at i-update ang mga nilalaman nito tulad ng sumusunod:

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

Sa file na ito, ang method call .vue() ay magko-compile ng anumang Vue.js code at i-bundle ito sa production JavaScript file. Tumatanggap ang function ng isang bagay kung saan mo magagawa defitapusin ang bersyon ng Vue.js na iyong ginagamit. 

Pagkatapos i-edit ang file webpack.mix.js kailangan mong i-compile ang javascript code. Upang gawin ito, pinapatakbo namin muli ang command npm run dev.

Panghuli, upang subukan ang Vue sa pagpapatakbo, buksan ang file resources/views/welcome.blade.php at ipasok ang sumusunod na code:

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

Ang code, kasama ang naunang ginawang bahagi, ay gagawa ng isang video message Hello Vue!, dahil sa Vue.js instance na naka-mount sa isang HTML element na may id app.

Patakbuhin ang iyong application gamit ang php artisan serve, at buksan ito sa iyong paboritong browser.

Ercole Palmeri

Maaaring interesado ka rin sa ...

• Mga Service Provider sa Laravel: kung ano sila at kung paano gamitin ang Mga Service Provider sa Laravel
• Paano mag-install ng ChatGPT nang lokal sa iyong computer
• Paano ipasadya ang pagpi-print ng proyekto ng Gantt sa Microsoft Project
• Ano ang isang Framework sa Software Engineering, defikahulugan at mga uri ng mga balangkas
• Narito ang unang digital na kalooban kasama blockchain