Kaip naudoti Laravel su Vue.js 3

„Vue.js“ yra vienas iš dažniausiai naudojamų „JavaScript“ rėmelių, skirtų žiniatinklio sąsajoms ir vieno puslapio programoms kurti, kartu su „Laravel“ tampa labai galingu kūrimo įrankiu.

Kuriant žiniatinklio programėles plačiai naudojamas įrankis yra vuejs, o šiame straipsnyje pamatysime, kaip jį įdiegti ir naudoti su Laravel. Vue.js sistema buvo defikniedė progresyvi sistema nes jis specializuojasi kuriant HTML rodinius ir leidžia lengvai integruotis su kitų bibliotekų ir projektų komponentais.

„Vue.js“ sėkmę lemia ir pasirinkimas Laravel pasiūlyti jį kaip priekinę sistemą, todėl buvo išleista 2.0 versija.

Laravel projekto kūrimas

Pirmas žingsnis, žinoma, yra sukurti naują projektą Laravelyje. Jei turite tokį savo kompiuteryje, naudokite jį arba galite sukurti naują tik šiai mokymo programai.

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

Kai projektas prasidės, turėsite įdiegti npm priklausomybės. Norėdami tai padaryti, projekto kataloge paleiskite šią komandą:

npm install

Įdiegę priklausomybes, paleiskite šią komandą, kad sukurtumėte išteklius ir įsitikintumėte, kad viskas tikrai veikia:

npm run dev

Komanda npm run dev ypač atlieka įvairius patikrinimus ir konstravimus Laravel Mix sukompiliuoti failą resources/js/app.js ir failą resources/css/app.css failuose public/js/app.js e public/css/app.css.

Baigę, jei viskas veikia gerai, pamatysite kažką panašaus į tai:

Vue.js diegimas

Paruošę Laravel projektą, galime pradėti diegti Vue.js 3. Norėdami tai padaryti, projekto kataloge paleiskite šią komandą:

npm install --save-dev vue

Tai įdiegs Vue.js kaip vieną iš kūrimo priklausomybių. Sukūrus išteklius, jūsų gamybinis „JavaScript“ failas bus savarankiškas, todėl jums tereikia įdiegti „Vue.js“ kaip kūrimo priklausomybę.

Norėdami įsitikinti, kad „Vue 3“ buvo tinkamai įdiegtas, atidarykite failą package.json (esama projekto šaknyje) ir ieškokite "vue" skyriuje "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"
    }
}

Kaip matote, versijos numeris rodo, kad Vue.js 3 buvo įdiegtas. 

Pirmasis Vue.js bandymas

Savo welcome.blade.php faile įveskite šį kodą:

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

Kaip matote, sukūrėme elementą div su id "vue-app“. Scenarijaus elemento viduje sukūrėme Vue egzempliorių, kur konstruktoriui perduodame objektą, leidžiantį defipateikti kai kuriuos programos parametrus, tokius kaip duomenys ir elgsena, mūsų atveju:

• el: nuoroda į elementą div defibaigtas html
• data: duomenų rinkinys

Kai tik objektas bus sukurtas, Vue įgyja div su id vue-app ir pasirūpina vietos rezervavimo ženklo pakeitimu {{ text }} su verte, esančia duomenų objekte. Žinoma, šiame objekte gali būti daugiau nei viena ypatybė, net ir skirtingų tipų: galioja skaičiai, masyvai ir kiti įdėti objektai

Be šio pakeitimo, „Vue“ taip pat suaktyvino savo variklį ir padarė programą reaguojančią, t. y. bet koks teksto ypatybės pakeitimas nedelsiant atnaujins atitinkamą HTML elementą.

Antrasis Vue.js testas

Norėdami pereiti prie antrojo bandymo, pirmiausia turėsite sukurti programos egzempliorių, kad sukurtumėte naują komponentą. Tu atidaryk resources/app.js (o resources/js/app.js) ir atnaujinkite jo turinį taip:

// resources/app.js

require('./bootstrap');

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

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

Šiame faile kuriame naują Vue.js egzempliorių ir tam mums reikia Vue komponento, kurį pavadinome HelloVue.vue. Daugiau informacijos susipažinti su oficialiais dokumentais . 

Sukurkite naują failą resources/components/HelloVue.vue ir įveskite šį kodą:

// resources/components/HelloVue.vue

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

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

Failas, kurį ką tik sukūrėme, yra pagrindinis Vue.js komponentas, kuris spausdinamas Hello Vue! kaip header1 puslapyje. Galiausiai atidarykite webpack.mix.js failą projekto šaknyje ir atnaujinkite jo turinį taip:

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

Šiame faile metodo iškvietimas .vue() sukompiliuos bet kokį Vue.js kodą ir sujungs jį į gamybinį JavaScript failą. Funkcija priima objektą ten, kur galite definish jūsų naudojamos Vue.js versijos. 

Po failo redagavimo webpack.mix.js reikia sukompiliuoti javascript kodą. Norėdami tai padaryti, dar kartą paleidžiame komandą npm run dev.

Galiausiai, norėdami išbandyti Vue, atidarykite failą resources/views/welcome.blade.php ir įveskite šį kodą:

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

Kodas kartu su anksčiau sukurtu komponentu sukurs vaizdo pranešimą Sveiki Vue!, nes Vue.js egzempliorius yra sumontuotas HTML elemente su id app.

Paleiskite programą naudodami php artisan serveir atidarykite jį savo mėgstamoje naršyklėje.

Ercole Palmeri

Galbūt jus taip pat domina ...

• Paslaugų teikėjai Laravelyje: kas jie yra ir kaip naudotis paslaugų teikėjais Laravelyje
• Kaip įdiegti „ChatGPT“ vietoje savo kompiuteryje
• Kaip pritaikyti „Gantt“ projekto spausdinimą „Microsoft Project“
• Kas yra programinės įrangos inžinerijos struktūra, defikarkasų apibrėžimas ir tipai
• Čia ateina pirmasis skaitmeninis testamentas blockchain