Kuidas Laravelit Vue.js-iga kasutada 3

Vue.js on üks enim kasutatud JavaScripti kaadrivorme veebiliideste ja üheleheliste rakenduste loomiseks, koos Laraveliga saab sellest väga võimas arendustööriist.

Veebirakenduste arendamiseks on laialdaselt kasutatav tööriist vuejs ja selles artiklis näeme, kuidas seda Laraveliga installida ja kasutada. Vue.js raamistik oli defineet progressiivne raamistik kuna see on spetsialiseerunud HTML-vaadete loomisele ja võimaldab teil hõlpsasti integreerida teiste teekide ja projektide komponentidega.

Vue.js-i edu on tingitud ka valikust Laravel soovitada seda kasutajaliidese raamistikuna, mis viib versiooni 2.0 väljaandmiseni.

Laraveli projekti loomine

Esimene samm on loomulikult Laravelis uue projekti loomine. Kui teil on see arvutis olemas, kasutage seda või saate luua uue selle õpetuse jaoks.

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

Pärast projekti käivitamist peate installima les npm sõltuvused. Selleks käivitage oma projektikataloogis järgmine käsk:

npm install

Kui sõltuvused on installitud, käivitage ressursside loomiseks ja veendumaks, et kõik tõesti töötab, järgmine käsk:

npm run dev

Käsk npm run dev teeb eelkõige mitmesuguseid kontrolle ja ehitamisi Laravel Mix fail kompileerida resources/js/app.js ja fail resources/css/app.css failides public/js/app.js e public/css/app.css.

Kui olete lõpetanud, kui kõik töötab hästi, näete midagi sellist:

Vue.js installimine

Pärast Laraveli projekti ettevalmistamist saame jätkata Vue.js 3 installimist. Selleks käivitage oma projekti kataloogis järgmine käsk:

npm install --save-dev vue

See installib Vue.js'i ühe arendussõltuvusena. Pärast varade kompileerimist on teie JavaScripti tootmisfail iseseisev, nii et peate lihtsalt installima Vue.js arenduse sõltuvusena.

Veendumaks, et Vue 3 on õigesti installitud, avage fail package.json (esineb projekti juurtes) ja otsige "vue" jaotises "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"
    }
}

Nagu näete, näitab versiooni number, et Vue.js 3 on installitud. 

Vue.js'i esimene proovimine

Sisestage oma welcome.blade.php faili järgmine kood:

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

Nagu näete, oleme loonud elemendi div koos id "vue-app“. Skriptielemendi sees oleme loonud Vue eksemplari, kus edastame konstruktorile objekti, mis võimaldab meil definish mõned rakenduse parameetrid, näiteks andmed ja käitumine, meie puhul:

• el: viide elemendile div defilõpetatud html-is
• kuupäev: andmestik

Niipea kui objekt on loodud, Vue omandab div koos id vue-app ja hoolitseb kohahoidja asendamise eest {{ text }} andmeobjektis sisalduva väärtusega. Muidugi võib see objekt sisaldada rohkem kui ühte omadust, isegi erinevat tüüpi: numbrid, massiivid ja muud pesastatud objektid on kehtivad

Lisaks sellele asendamisele on Vue aktiveerinud ka oma mootori ja muutnud rakenduse tundlikuks, st iga tekstiatribuudi muudatus põhjustab HTML-is vastava elemendi kohese värskenduse.

Vue.js'i teine ​​test

Teise prooviversiooniga jätkamiseks peate esmalt käivitama rakenduse, et luua uus komponent. Sa avad resources/app.js (o resources/js/app.js) ja värskendage selle sisu järgmiselt:

// resources/app.js

require('./bootstrap');

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

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

Selles failis loome uue Vue.js eksemplari ja selleks vajame Vue komponenti, mille oleme nimetanud HelloVue.vue. Rohkem informatsiooni tutvuge ametlike dokumentidega . 

Looge uus fail resources/components/HelloVue.vue ja sisestage järgmine kood:

// resources/components/HelloVue.vue

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

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

Just loodud fail on Vue.js põhikomponent, mis prindib Hello Vue! Tulema header1 lehel. Lõpuks avage webpack.mix.js faili projekti juure ja värskendage selle sisu järgmiselt:

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

Selles failis meetodi kutse .vue() kompileerib mis tahes Vue.js koodi ja koondab selle JavaScripti tootmisfaili. Funktsioon aktsepteerib objekti, kus saate defitutvuge kasutatava Vue.js versiooniga. 

Pärast faili redigeerimist webpack.mix.js peate kompileerima javascripti koodi. Selleks käivitame käsu uuesti npm run dev.

Lõpuks avage fail Vue proovimiseks resources/views/welcome.blade.php ja sisestage järgmine kood:

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

Kood koos eelnevalt loodud komponendiga loob videosõnumi Tere Vue!, kuna Vue.js-i eksemplar on ühendatud HTML-elemendile, millel on id app.

Käivitage oma rakendus kasutades php artisan serveja avage see oma lemmikbrauseris.

Ercole Palmeri

Samuti võite olla huvitatud ...

• Laraveli teenusepakkujad: mis need on ja kuidas teenusepakkujaid Laravelis kasutada
• Kuidas installida ChatGPT kohapeal arvutisse
• Kuidas kohandada Gantti projekti printimist Microsoft Projectis
• Mis on tarkvaratehnika raamistik, defiraamistike määratlus ja tüübid
• Siin tuleb esimene digitaalne testament blockchain