Erthyglau

Sut i ddefnyddio Laravel gyda Vue.js 3

Vue.js yw un o'r fframvorks JavaScript a ddefnyddir fwyaf ar gyfer creu rhyngwynebau gwe a chymwysiadau tudalen sengl, ynghyd â Laravel mae'n dod yn offeryn datblygu pwerus iawn.

Ar gyfer datblygu apiau gwe, offeryn a ddefnyddir yn eang yw vuejs, ac yn yr erthygl hon byddwn yn gweld sut i'w osod a'i ddefnyddio gyda Laravel. Yr oedd fframwaith Vue.js definito fframwaith blaengar oherwydd ei fod yn arbenigo mewn creu golygfeydd HTML, ac yn caniatáu ichi integreiddio'n hawdd â chydrannau llyfrgelloedd a phrosiectau eraill.

Mae llwyddiant Vue.js hefyd oherwydd y dewis o Laravel i'w awgrymu fel fframwaith frontend, gan arwain at ryddhau fersiwn 2.0.

Tabl cynnwys

Creu prosiect Laravel

Y cam cyntaf, wrth gwrs, yw creu prosiect newydd yn Laravel. Os oes gennych un ar eich cyfrifiadur, defnyddiwch ef neu gallwch greu un newydd ar gyfer y tiwtorial hwn yn unig.

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

Ar ôl i'r prosiect ddechrau, bydd angen i chi osod y npm caethiwed. I wneud hyn, rhedeg y gorchymyn canlynol y tu mewn i'ch cyfeiriadur prosiect:

npm install

Unwaith y bydd y dibyniaethau wedi'u gosod, rhedeg y gorchymyn canlynol i adeiladu'r adnoddau a sicrhau bod popeth yn gweithio mewn gwirionedd:

npm run dev

Y gorchymyn npm run dev yn perfformio amrywiaeth o wiriadau ac adeiladu, yn arbennig Laravel Mix llunio'r ffeil resources/js/app.js a'r ffeil resources/css/app.css mewn ffeiliau public/js/app.js e public/css/app.css.

Ar ôl gorffen, os yw popeth yn gweithio'n iawn, fe welwch rywbeth fel hyn:

Gosod Vue.js

Ar ôl paratoi'r prosiect Laravel, gallwn symud ymlaen i osod Vue.js 3. I wneud hyn, rhedeg y gorchymyn canlynol yn eich cyfeiriadur prosiect:

npm install --save-dev vue

Bydd hyn yn gosod Vue.js fel un o'r dibyniaethau datblygu. Ar ôl llunio'r asedau, bydd eich ffeil JavaScript cynhyrchu yn hunangynhwysol, felly does ond angen i chi osod Vue.js fel dibyniaeth datblygu.

I wneud yn siŵr bod Vue 3 wedi'i osod yn gywir, agorwch y ffeil package.json (yn bresennol yn gwraidd y prosiect) a chwiliwch am "vue" yn yr adran "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"
    }
}

Fel y gwelwch, mae rhif y fersiwn yn nodi bod Vue.js 3 wedi'i osod.

Cais cyntaf Vue.js

Yn eich ffeil welcome.blade.php rhowch y cod canlynol:

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

Fel y gwelwch rydym wedi creu elfen div gyda id "vue-app“. Y tu mewn i'r elfen sgript rydym wedi creu enghraifft o Vue, lle rydym yn trosglwyddo gwrthrych sy'n caniatáu i ni i'r adeiladwr definish rhai paramedrau cais, megis data ac ymddygiadau, yn ein hachos ni:

el: Cyfeiriad at yr elfen div defigorffen yn yr html
dyddiad: set data

Cyn gynted ag y bydd y gwrthrych yn cael ei greu, Vue yn caffael y div gyda id vue-app ac yn gofalu am ddisodli'r deiliad lle {{ text }} gyda'r gwerth sydd wedi'i gynnwys yn y gwrthrych data. Wrth gwrs, gall y gwrthrych hwn gynnwys mwy nag un priodwedd, hyd yn oed o wahanol fathau: mae niferoedd, araeau a gwrthrychau nythu eraill yn ddilys

Heblaw am yr amnewid hwn, mae Vue hefyd wedi actifadu ei injan ac wedi gwneud y rhaglen yn ymatebol, h.y. bydd unrhyw newid i briodwedd y testun yn achosi diweddariad ar unwaith o'r elfen gyfatebol yn yr HTML.

Ail brawf o Vue.js

I symud ymlaen i'r ail dreial, yn gyntaf bydd angen i chi roi'r app ar unwaith i greu cydran newydd. Rydych chi'n agor resources/app.js (o resources/js/app.js) a diweddaru ei gynnwys fel a ganlyn:

// resources/app.js

require('./bootstrap');

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

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

Yn y ffeil hon rydym yn creu enghraifft Vue.js newydd, ac i wneud hyn mae angen cydran Vue yr ydym wedi ei galw yn HelloVue.vue. Am fwy o wybodaeth ymgynghori â'r dogfennau swyddogol .

Creu ffeil newydd resources/components/HelloVue.vue a rhowch y cod canlynol:

// resources/components/HelloVue.vue

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

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

Mae'r ffeil rydyn ni newydd ei chreu yn gydran Vue.js sylfaenol sy'n argraffu Hello Vue! Dewch header1 ar y dudalen. Yn olaf, agorwch y webpack.mix.js ffeil yng ngwraidd y prosiect a diweddaru ei gynnwys fel a ganlyn:

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

Yn y ffeil hon, mae'r alwad dull .vue() yn llunio unrhyw god Vue.js ac yn ei bwndelu i'r ffeil JavaScript cynhyrchu. Mae'r swyddogaeth yn derbyn gwrthrych lle gallwch chi definish y fersiwn o Vue.js rydych yn ei ddefnyddio.

Ar ôl golygu'r ffeil webpack.mix.js mae angen i chi lunio'r cod javascript. I wneud hyn, rydym yn rhedeg y gorchymyn eto npm run dev.

Yn olaf, i roi cynnig ar Vue yn weithredol, agorwch y ffeil resources/views/welcome.blade.php a rhowch y cod canlynol:

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

Bydd y cod, ynghyd â'r gydran a grëwyd yn flaenorol, yn cynhyrchu neges fideo Helo Vue!, oherwydd bod yr enghraifft Vue.js wedi'i osod ar elfen HTML gyda id app.

Rhedeg eich cais gan ddefnyddio php artisan serve, a'i agor yn eich hoff borwr.

Ercole Palmeri

Efallai y bydd gennych chi ddiddordeb hefyd mewn ...