Laravelin käyttäminen Vue.js 3:n kanssa

Vue.js on yksi eniten käytetyistä JavaScript-framevorkeista verkkorajapintojen ja yksisivuisten sovellusten luomiseen, ja siitä tulee yhdessä Laravelin kanssa erittäin tehokas kehitystyökalu.

Verkkosovellusten kehittämisessä laajalti käytetty työkalu on vuejs, ja tässä artikkelissa näemme kuinka asentaa ja käyttää sitä Laravelin kanssa. Vue.js-kehys oli definito progressiivinen kehys koska se on erikoistunut HTML-näkymien luomiseen ja mahdollistaa helpon integroinnin muiden kirjastojen ja projektien komponentteihin.

Vue.js:n menestys johtuu myös valinnasta Laravel ehdottaa sitä käyttöliittymäkehykseksi, mikä johti version 2.0 julkaisuun.

Laravel-projektin luominen

Ensimmäinen askel on tietysti uuden projektin luominen Laraveliin. Jos sinulla on sellainen tietokoneellasi, käytä sitä tai voit luoda uuden vain tätä opetusohjelmaa varten.

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

Kun projekti on alkanut, sinun on asennettava npm riippuvuuksia. Voit tehdä tämän suorittamalla seuraavan komennon projektihakemistossasi:

npm install

Kun riippuvuudet on asennettu, suorita seuraava komento rakentaaksesi resurssit ja varmistaaksesi, että kaikki todella toimii:

npm run dev

Käsky npm run dev suorittaa erityisesti erilaisia ​​tarkastuksia ja koontiversioita Laravel Mix kokoa tiedosto resources/js/app.js ja tiedosto resources/css/app.css tiedostoissa public/js/app.js e public/css/app.css.

Kun olet valmis, jos kaikki toimii hyvin, näet jotain tällaista:

Vue.js:n asentaminen

Laravel-projektin valmistelun jälkeen voimme jatkaa Vue.js 3:n asentamista. Voit tehdä tämän suorittamalla seuraavan komennon projektihakemistossasi:

npm install --save-dev vue

Tämä asentaa Vue.js:n yhdeksi kehitysriippuvuudesta. Omaisuuden kääntämisen jälkeen tuotanto JavaScript-tiedostosi on itsenäinen, joten sinun tarvitsee vain asentaa Vue.js kehitysriippuvuutena.

Varmista, että Vue 3 on asennettu oikein, avaa tiedosto package.json (esillä projektin juuressa) ja etsi "vue" osiossa "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"
    }
}

Kuten näet, versionumero osoittaa, että Vue.js 3 on asennettu. 

Ensimmäinen Vue.js-kokeilu

Laita welcome.blade.php-tiedostoosi seuraava koodi:

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

Kuten näet, olemme luoneet elementin div kanssa id "vue-app". Skriptielementin sisään olemme luoneet Vue-esiintymän, jossa välitämme rakentajalle objektin, jonka avulla voimme definäkemään joitain sovellusparametreja, kuten dataa ja käyttäytymistä, meidän tapauksessamme:

• el: Viittaus elementtiin div defipäättynyt html:ään
• päivämäärä: tietojoukko

Heti kun objekti on luotu, Vue hankkii div kanssa id vue-app ja huolehtii paikkamerkin vaihtamisesta {{ text }} tietoobjektin sisältämän arvon kanssa. Tietenkin tämä objekti voi sisältää useamman kuin yhden ominaisuuden, jopa erityyppisiä: numerot, taulukot ja muut sisäkkäiset objektit ovat kelvollisia

Tämän korvauksen lisäksi Vue on myös aktivoinut moottorinsa ja tehnyt sovelluksesta responsiivisen, eli mikä tahansa muutos tekstiominaisuuteen aiheuttaa välittömän päivityksen vastaavaan elementtiin HTML:ssä.

Vue.js:n toinen testi

Jos haluat jatkaa toiseen kokeiluun, sinun on ensin luotava sovellus luodaksesi uuden komponentin. Sinä auki resources/app.js (o resources/js/app.js) ja päivittää sen sisältö seuraavasti:

// resources/app.js

require('./bootstrap');

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

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

Tässä tiedostossa luomme uutta Vue.js-instanssia, ja tätä varten tarvitsemme Vue-komponentin, jonka olemme kutsuneet nimellä HelloVue.vue. Lisätietoja tutustu virallisiin asiakirjoihin . 

Luo uusi tiedosto resources/components/HelloVue.vue ja syötä seuraava koodi:

// resources/components/HelloVue.vue

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

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

Juuri luomamme tiedosto on Vue.js-peruskomponentti, joka tulostuu Hello Vue! Tulla header1 sivulla. Avaa lopuksi webpack.mix.js tiedosto projektin juureen ja päivitä sen sisältö seuraavasti:

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

Tässä tiedostossa menetelmäkutsu .vue() kokoaa minkä tahansa Vue.js-koodin ja niputtaa sen tuotannon JavaScript-tiedostoon. Funktio hyväksyy kohteen missä voit defitarkista käyttämäsi Vue.js-versio. 

Tiedoston muokkauksen jälkeen webpack.mix.js sinun on käännettävä javascript-koodi. Tätä varten suoritamme komennon uudelleen npm run dev.

Lopuksi, jotta voit kokeilla Vuea toiminnallisesti, avaa tiedosto resources/views/welcome.blade.php ja syötä seuraava koodi:

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

Koodi yhdessä aiemmin luodun komponentin kanssa tuottaa videoviestin Hei Vue!, koska Vue.js-instanssi on asennettu HTML-elementtiin, jossa on id app.

Suorita sovelluksesi käyttämällä php artisan serveja avaa se suosikkiselaimessasi.

Ercole Palmeri

Voisit myös olla kiinnostunut näistä ...

• Palveluntarjoajat Laravelissa: mitä ne ovat ja kuinka palveluntarjoajia käytetään Laravelissa
• Kuinka asentaa ChatGPT paikallisesti tietokoneellesi
• Gantt-projektitulostuksen mukauttaminen Microsoft Projectissa
• Mikä on ohjelmistokehityksen viitekehys, defipuitteiden määritelmä ja tyypit
• Tässä tulee ensimmäinen digitaalinen testamentti blockchain