Artikoli

Otu esi eji Laravel na Vue.js 3

Vue.js bụ otu n'ime Javascript Framevorks nke a na-ejikarị eme ihe maka ịmepụta ntanetị weebụ na ngwa otu ibe, yana Laravel ọ na-aghọ ngwá ọrụ mmepe siri ike.

Maka mmepe nke ngwa weebụ, ngwá ọrụ a na-ejikarị eme ihe bụ vuejs, na n'isiokwu a, anyị ga-ahụ otu esi etinye ya na Laravel. Usoro Vue.js bụ definite usoro na-aga n'ihu n'ihi na ọ bụ ọkachamara na ịmepụta echiche HTML, na-enye gị ohere ịmekọrịta ngwa ngwa na akụkụ nke ụlọ akwụkwọ na ọrụ ndị ọzọ.

Ihe ịga nke ọma nke Vue.js bụkwa n'ihi na nhọrọ nke Laravel na-atụ aro ya dị ka frontend framework, si otú a na-eduga ná mwepụta nke version 2.0.

Tebulu ọdịnaya

Ihe okike Laravel

Nzọụkwụ mbụ bụ, n'ezie, ịmepụta ọrụ ọhụrụ na Laravel. Ọ bụrụ na ị nwere otu na kọmputa gị, jiri ya ma ọ bụ ị nwere ike ịmepụta nke ọhụrụ naanị maka nkuzi a.

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

Mgbe ọrụ ahụ malitere, ị ga-achọ ịwụnye les npm riri ahụ. Iji mee nke a, gbanye iwu a n'ime ndekọ ọrụ gị:

npm install

Ozugbo etinyere ihe ndabere ahụ, mee iwu na-esonụ iji wuo akụrụngwa ma hụ na ihe niile na-arụ ọrụ n'ezie:

npm run dev

Iwu ahụ npm run dev na-eme nyocha dị iche iche na mkpokọta, ọkachasị Laravel Mix chịkọta faịlụ ahụ resources/js/app.js na faịlụ resources/css/app.css na faịlụ public/js/app.js e public/css/app.css.

Mgbe emechara ma ọ bụrụ na ihe niile na-arụ ọrụ nke ọma, ị ga-ahụ ihe dị ka nke a:

Ịwụnye Vue.js

Mgbe anyị kwadebere ọrụ Laravel, anyị nwere ike ịga n'ihu ịwụnye Vue.js 3. Iji mee nke a, mee iwu na-esonụ na ndekọ ọrụ gị:

npm install --save-dev vue

Nke a ga-etinye Vue.js dị ka otu n'ime mmepe ndabere. Mgbe achịkọta akụ, gị mmepụta Javascript faịlụ ga-nwere onwe, otú ị dị nnọọ mkpa iji wụnye Vue.js dị ka a mmepe ndabere.

Iji hụ na etinyere Vue 3 nke ọma, mepee faịlụ ahụ package.json (dị ugbu a na mgbọrọgwụ oru ngo) ma chọọ "vue" na ngalaba "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"
    }
}

Dị ka ị pụrụ ịhụ, version nọmba na-egosi na Vue.js 3 e arụnyere.

Mgbalị mbụ nke Vue.js

Na welcome.blade.php faịlụ tinye koodu a:

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

Dị ka ị na-ahụ, anyị ekepụtala mmewere div con id "vue-app". N'ime akụkụ edemede anyị ekepụtara ihe atụ nke Vue, ebe anyị na-ebufe onye nrụpụta ihe na-enye anyị ohere ime. definish ụfọdụ ngwa ngwa, dị ka data na omume, n'ọnọdụ anyị:

el: Ntụaka na mmewere div defiemechara na html
ụbọchị: dataset

Ozugbo emepụtara ihe ahụ, Vue enweta ihe div con id vue-app ma na-elezi anya iji dochie anya ebe {{ text }} na uru dị n'ime ihe data. N'ezie, ihe a nwere ike ịnwe ihe karịrị otu ihe, ọbụnadị ụdị dị iche iche: ọnụọgụgụ, nhazi na ihe ndị ọzọ akwụrụ dị irè.

E wezụga ngbanwe a, Vue agbalitekwala injin ya ma mee ka ngwa ahụ nwee mmetụta, ya bụ mgbanwe ọ bụla na akụrụngwa ederede ga-eme ka mmelite ngwa ngwa nke ihe kwekọrọ na HTML.

Ule nke abụọ nke Vue.js

Iji gaa n'ihu na nnwale nke abụọ, ị ga-ebu ụzọ mee ngwa ngwa ka imepụta akụrụngwa ọhụrụ. Ị meghere resources/app.js (o resources/js/app.js) ma kwalite ọdịnaya ya dịka ndị a:

// resources/app.js

require('./bootstrap');

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

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

Na faịlụ a anyị na-eke ọhụrụ Vue.js atụ, na ime nke a anyị mkpa a Vue akụrụngwa nke anyị kpọrọ HelloVue.vue. Maka ozi ndị ọzọ lelee akwụkwọ ndị gọọmentị .

Mepụta faịlụ ọhụrụ resources/components/HelloVue.vue ma tinye koodu a:

// resources/components/HelloVue.vue

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

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

Faịlụ anyị mebere bụ mpaghara Vue.js bụ isi nke na-ebipụta Hello Vue! -abịa header1 na ibe. N'ikpeazụ, mepee webpack.mix.js faịlụ na mgbọrọgwụ oru ngo ma melite ọdịnaya ya dị ka ndị a:

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

Na faịlụ a, a na-akpọ usoro a .vue() ga-achịkọta koodu Vue.js ọ bụla wee chịkọta ya na faịlụ Javascript mmepụta. Ọrụ ahụ na-anabata ihe ebe ị nwere ike definish ụdị Vue.js ị na-eji.

Mgbe edezi faịlụ webpack.mix.js ịkwesịrị ikpokọta koodu javascript. Iji mee nke a, anyị na-agba ọsọ iwu ọzọ npm run dev.

N'ikpeazụ, ka ịnwale Vue ka ọ rụọ ọrụ, mepee faịlụ ahụ resources/views/welcome.blade.php ma tinye koodu a:

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

Koodu ahụ, yana akụrụngwa emebere na mbụ, ga-ewepụta ozi vidiyo Ndewo Vue!, n'ihi na ihe atụ Vue.js na-n'ịnyịnya na HTML mmewere na id app.

Jiri ngwa mee ngwa gị php artisan serve, ma mepee ya na ihe nchọgharị kachasị amasị gị.

Ercole Palmeri

I nwekwara ike inwe mmasị na ...