Mar a chleachdas tu Laravel le Vue.js 3

Is e Vue.js aon de na frèamaichean JavaScript as motha a chleachdar airson a bhith a’ cruthachadh eadar-aghaidh lìn agus tagraidhean aon duilleag, còmhla ri Laravel bidh e na inneal leasachaidh fìor chumhachdach.

Airson leasachadh app lìn, is e vuejs inneal a thathas a’ cleachdadh gu farsaing, agus san artaigil seo chì sinn mar a stàlaicheas agus a chleachdas sinn e le Laravel. Tha frèam Vue.js air a mhìneachadh frèam adhartach oir tha e speisealaichte ann an cruthachadh bheachdan HTML, agus leigidh e leat amalachadh gu furasta le co-phàirtean de leabharlannan agus pròiseactan eile.

Tha soirbheachas Vue.js cuideachd mar thoradh air an roghainn de Laravel gus a mholadh mar fhrèam aghaidh, mar sin a’ leantainn gu sgaoileadh dreach 2.0.

A ' cruthachadh pròiseact Laravel

Is e a’ chiad cheum, gu dearbh, pròiseact ùr a chruthachadh ann an Laravel. Ma tha fear agad air a’ choimpiutair agad, cleachd e no faodaidh tu fear ùr a chruthachadh dìreach airson an oideachadh seo.

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

Às deidh don phròiseact tòiseachadh, feumaidh tu am faidhle a stàladh npm tràilleachd. Gus seo a dhèanamh, ruith an àithne a leanas taobh a-staigh an eòlaire pròiseict agad:

npm install

Aon uair ‘s gu bheil na eisimeileachd air an stàladh, ruith an àithne a leanas gus na goireasan a thogail agus dèan cinnteach gu bheil a h-uile dad ag obair gu fìor:

npm run dev

An àithne npm run dev a’ dèanamh diofar sgrùdaidhean agus togail, gu sònraichte Laravel Mix am faidhle a chur ri chèile resources/js/app.js agus am faidhle resources/css/app.css ann am faidhlichean public/js/app.js e public/css/app.css.

Nuair a bhios tu deiseil ma dh’ obraicheas a h-uile càil gu math, chì thu rudeigin mar seo:

Stàladh Vue.js

Às deidh dhuinn am pròiseact Laravel ullachadh, is urrainn dhuinn a dhol air adhart gu stàladh Vue.js 3. Gus seo a dhèanamh, ruith an àithne a leanas san eòlaire pròiseict agad:

npm install --save-dev vue

Cuiridh seo a-steach Vue.js mar aon de na eisimeileachd leasachaidh. Às deidh dhut a ’mhaoin a chuir ri chèile, bidh am faidhle JavaScript riochdachaidh agad gu fèin-ghluasadach, agus mar sin feumaidh tu dìreach Vue.js a chuir a-steach mar eisimeileachd leasachaidh.

Gus dèanamh cinnteach gun deach Vue 3 a chuir a-steach gu ceart, fosgail am faidhle package.json (an làthair ann am freumh a’ phròiseict) agus lorg "vue" anns an earrainn "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 chì thu, tha àireamh an tionndaidh a’ nochdadh gun deach Vue.js 3 a chuir a-steach. 

A’ chiad feuchainn air Vue.js

Anns an fhaidhle welcome.blade.php agad cuir an còd a leanas:

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

Mar a chì thu tha sinn air eileamaid a chruthachadh div le id "vue-app“. Taobh a-staigh an eileamaid sgriobt tha sinn air eisimpleir de Vue a chruthachadh, far am bi sinn a’ toirt rud don neach-togail a leigeas leinn cuid de chrìochan an tagraidh a mhìneachadh, leithid dàta agus giùlan, nar cùis:

• el: Iomradh air an eileamaid div air a mhìneachadh ann an html
• ceann-latha: data

Cho luath 's a tha an nì air a chruthachadh, Vue a' faighinn an div le id vue-app agus a 'gabhail cùram mu bhith a' cur an àite an neach-àite {{ text }} leis an luach a tha taobh a-staigh an nì dàta. Gu dearbh, faodaidh barrachd air aon seilbh a bhith anns an nì seo, eadhon de dhiofar seòrsaichean: tha àireamhan, arrays agus nithean neadachaidh eile dligheach

A bharrachd air an ath-chur seo, tha Vue cuideachd air an einnsean aige a chuir an gnìomh agus air an tagradh a dhèanamh freagairteach, i.e. bidh atharrachadh sam bith air seilbh an teacsa ag adhbhrachadh ùrachadh sa bhad air an eileamaid fhreagarrach san HTML.

An dàrna deuchainn de Vue.js

Gus a dhol air adhart chun dàrna deuchainn, feumaidh tu an-toiseach an aplacaid a chuir air dòigh gus pàirt ùr a chruthachadh. Bidh thu a’ fosgladh resources/app.js (o resources/js/app.js) agus ùraich an susbaint mar a leanas:

// resources/app.js

require('./bootstrap');

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

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

Anns an fhaidhle seo tha sinn a’ cruthachadh eisimpleir Vue.js ùr, agus airson seo a dhèanamh feumaidh sinn pàirt Vue ris an can sinn HelloVue.vue. Airson tuilleadh fiosrachaidh thoir sùil air na sgrìobhainnean oifigeil . 

Cruthaich faidhle ùr resources/components/HelloVue.vue agus cuir a-steach an còd a leanas:

// resources/components/HelloVue.vue

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

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

Tha am faidhle a chruthaich sinn dìreach na phàirt bunaiteach de Vue.js a bhios a’ clò-bhualadh Hello Vue! tighinn header1 air an duilleig. Mu dheireadh, fosgail an webpack.mix.js faidhle ann am freumh a’ phròiseict agus ùraich na tha ann mar 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', [
        //
    ]);

Anns an fhaidhle seo, a 'ghairm modh .vue() cuiridh e ri chèile còd Vue.js sam bith agus cuiridh e a-steach e don fhaidhle JavaScript riochdachaidh. Gabhaidh an gnìomh ri nì far an urrainn dhut an dreach de Vue.js a tha thu a’ cleachdadh a mhìneachadh. 

Às deidh am faidhle a dheasachadh webpack.mix.js feumaidh tu an còd javascript a chur ri chèile. Gus seo a dhèanamh, ruithidh sinn an àithne a-rithist npm run dev.

Mu dheireadh, gus Vue fheuchainn gu gnìomhach, fosgail am faidhle resources/views/welcome.blade.php agus cuir a-steach an còd 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>

Bheir an còd, còmhla ris a’ phàirt a chaidh a chruthachadh roimhe, teachdaireachd bhidio Halo Vue!, air sgàth gu bheil eisimpleir Vue.js air a chuir suas air eileamaid HTML le id app.

Ruith an tagradh agad a’ cleachdadh php artisan serve, agus fosgail e sa bhrobhsair as fheàrr leat.

Ercole Palmeri

Is dòcha gum biodh ùidh agad ann an ...

• Solaraichean Seirbheis ann an Laravel: dè a th’ annta agus mar a chleachdas tu Solaraichean Seirbheis ann an Laravel
• Mar a stàlaicheas tu ChatGPT gu h-ionadail air do choimpiutair
• Mar as urrainn dhut clò-bhualadh pròiseact Gantt a ghnàthachadh ann am Microsoft Project
• Dè a th’ ann am Frèam ann an innleadaireachd bathar-bog, mìneachadh agus seòrsaichean Frèam
• Seo a’ chiad tiomnadh didseatach le blockchain