Conas Laravel a úsáid le Vue.js 3

Tá Vue.js ar cheann de na frámaí JavaScript is mó a úsáidtear chun comhéadain ghréasáin agus feidhmchláir aon-leathanaigh a chruthú, mar aon le Laravel bíonn sé ina uirlis forbartha an-chumhachtach.

Chun apps gréasáin a fhorbairt, is uirlis a úsáidtear go forleathan é vuejs, agus san Airteagal seo feicfimid conas é a shuiteáil agus a úsáid le Laravel. Bhí creat Vue.js defirivet creat forásach toisc go bhfuil sé speisialaithe i gcruthú tuairimí HTML, agus ligeann duit comhtháthú go héasca le comhpháirteanna leabharlanna agus tionscadail eile.

Tá rathúlacht Vue.js freisin mar gheall ar rogha na Laravel é a mholadh mar chreat tosaigh, rud a fhágann go n-eiseofar leagan 2.0.

Cruthú tionscadal Laravel

Is é an chéad chéim, ar ndóigh, tionscadal nua a chruthú i Laravel. Má tá ceann agat ar do ríomhaire, bain úsáid as é nó is féidir leat ceann nua a chruthú don rang teagaisc seo.

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

Tar éis don tionscadal tosú, beidh ort les a shuiteáil npm andúile. Chun seo a dhéanamh, rith an t-ordú seo a leanas taobh istigh d'eolaire tionscadail:

npm install

Nuair a bheidh na spleáchais suiteáilte, reáchtáil an t-ordú seo a leanas chun na hacmhainní a thógáil agus déan cinnte go n-oibríonn gach rud i ndáiríre:

npm run dev

An t-ordú npm run dev déanann sé éagsúlacht seiceálacha agus tiomsaithe, go háirithe Laravel Mix an comhad a thiomsú resources/js/app.js agus an file resources/css/app.css i gcomhaid public/js/app.js e public/css/app.css.

Nuair a bheidh tú críochnaithe má oibríonn gach rud go breá, feicfidh tú rud éigin mar seo:

Suiteáil Vue.js

Tar éis an tionscadal Laravel a ullmhú, is féidir linn dul ar aghaidh chun Vue.js 3 a shuiteáil. Chun seo a dhéanamh, rith an t-ordú seo a leanas i do eolaire tionscadail:

npm install --save-dev vue

Cuirfidh sé seo Vue.js isteach mar cheann de na spleáchais forbartha. Tar éis na sócmhainní a thiomsú, beidh do chomhad JavaScript táirgthe féin-chuimsitheach, mar sin ní mór duit ach Vue.js a shuiteáil mar spleáchas forbartha.

Chun a chinntiú go raibh Vue 3 suiteáilte i gceart, oscail an comhad package.json (i láthair i bhfréamh an tionscadail) agus déan cuardach "vue" sa roinn "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"
    }
}

Mar a fheiceann tú, léiríonn uimhir an leagain go bhfuil Vue.js 3 suiteáilte. 

An chéad iarracht ar Vue.js

Cuir an cód seo a leanas i do chomhad welcome.blade.php:

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

Mar a fheiceann tú tá eilimint cruthaithe againn div le id "vue-app“. Taobh istigh den eilimint scripte tá sampla de Vue cruthaithe againn, áit a gcuirimid ar aghaidh chuig an cruthaitheoir rud a ligeann dúinn definish roinnt paraiméadair feidhmchláir, amhail sonraí agus iompraíochtaí, inár gcás:

• el: Tagairt don eilimint div deficríochnaithe sa html
• dáta: tacar sonraí

Chomh luath agus a chruthaítear an réad, Vue fhaigheann an div le id vue-app agus déanann sé cúram d'athsholáthar an áitsealbhóra {{ text }} leis an luach atá laistigh den réad sonraí. Ar ndóigh, féadann níos mó ná airí amháin a bheith sa réad seo, fiú de chineálacha éagsúla: tá uimhreacha, eagair agus réada neadaithe eile bailí

Seachas an t-athsholáthar seo, chuir Vue a inneall i ngníomh freisin agus rinne sé an feidhmchlár freagrúil, i.e. déanfar nuashonrú láithreach ar an eilimint chomhfhreagrach san HTML de bharr aon athrú ar airí an téacs.

An dara tástáil ar Vue.js

Chun dul ar aghaidh go dtí an dara triail, beidh ort an app a chur ar an toirt chun comhpháirt nua a chruthú. osclaíonn tú resources/app.js (o resources/js/app.js) agus a inneachar a nuashonrú mar a leanas:

// resources/app.js

require('./bootstrap');

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

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

Sa chomhad seo tá sampla nua Vue.js á chruthú againn, agus chun é seo a dhéanamh ní mór dúinn comhpháirt Vue ar a dtugtar HelloVue.vue. Chun tuilleadh eolais a fháil féach ar na doiciméid oifigiúla . 

Cruthaigh comhad nua resources/components/HelloVue.vue agus cuir isteach an cód seo a leanas:

// resources/components/HelloVue.vue

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

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

Comhpháirt bhunúsach Vue.js a phriontálann an comhad a chruthaigh muid Hello Vue! Tar header1 ar an leathanach. Ar deireadh, oscail an webpack.mix.js comhad i bhfréamh an tionscadail agus nuashonraigh a bhfuil ann mar seo a leanas:

// 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 chomhad seo, an modh glaoch .vue() tiomsóidh sé aon chód Vue.js agus cuachta isteach sa chomhad JavaScript táirgthe é. Glacann an fheidhm le réad nuair is féidir leat definish an leagan de Vue.js atá in úsáid agat. 

Tar éis eagarthóireacht a dhéanamh ar an gcomhad webpack.mix.js ní mór duit an cód javascript a thiomsú. Chun seo a dhéanamh, ritheann muid an t-ordú arís npm run dev.

Ar deireadh, chun Vue a thriail go hoibríochtúil, oscail an comhad resources/views/welcome.blade.php agus cuir isteach an cód seo a leanas:

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

Déanfaidh an cód, mar aon leis an gcomhpháirt a cruthaíodh roimhe seo, teachtaireacht físe a tháirgeadh Dia duit Vue!, mar gheall ar shampla Vue.js a bheith gléasta ar eilimint HTML le id app.

Rith d'iarratas ag baint úsáide as php artisan serve, agus é a oscailt sa bhrabhsálaí is fearr leat.

Ercole Palmeri

B’fhéidir go mbeadh suim agat i ...

• Soláthraithe Seirbhíse i Laravel: cad iad agus conas Soláthraithe Seirbhíse a úsáid i Laravel
• Conas ChatGPT a shuiteáil go háitiúil ar do ríomhaire
• Conas priontáil tionscadail Gantt a shaincheapadh i Microsoft Project
• Cad is Creat in Innealtóireacht Bogearraí, defisainmhíniú agus cineálacha creata
• Anseo a thagann an chéad uacht digiteach le blockchain