For utvikling av nettapper er et mye brukt verktøy vuejs, og i denne artikkelen skal vi se hvordan du installerer og bruker det med Laravel. Vue.js-rammeverket var definagle progressive rammer fordi den er spesialisert på å lage HTML-visninger, og lar deg enkelt integrere med komponenter i andre biblioteker og prosjekter.
Suksessen til Vue.js skyldes også valget av Laravel å foreslå det som et frontend-rammeverk, og dermed føre til utgivelsen av versjon 2.0.
Første steg er selvfølgelig å lage et nytt prosjekt i Laravel. Hvis du har en på datamaskinen din, bruk den eller du kan lage en ny bare for denne opplæringen.
composer create-project laravel/laravel guide-laravel-vue
Etter at prosjektet har startet, må du installere npm
avhengighet. For å gjøre dette, kjør følgende kommando i prosjektkatalogen din:
npm install
Når avhengighetene er installert, kjør følgende kommando for å bygge ressursene og sørge for at alt virkelig fungerer:
npm run dev
Kommandoen npm run dev
utfører en rekke kontroller og bygg, spesielt Laravel Mix
kompiler filen resources/js/app.js
og filen resources/css/app.css
i filer public/js/app.js
e public/css/app.css
.
Når du er ferdig hvis alt fungerer bra, vil du se noe slikt:
Etter å ha forberedt Laravel-prosjektet, kan vi fortsette å installere Vue.js 3. For å gjøre dette, kjør følgende kommando i prosjektkatalogen din:
npm install --save-dev vue
Dette vil installere Vue.js som en av utviklingsavhengighetene. Etter å ha kompilert ressursene, vil JavaScript-filen din for produksjon være selvstendig, så du trenger bare å installere Vue.js som en utviklingsavhengighet.
Åpne filen for å sikre at Vue 3 ble installert riktig package.json
(tilstede i prosjektroten) og søk etter "vue"
i seksjonen "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"
}
}
Som du kan se, indikerer versjonsnummeret at Vue.js 3 er installert.
Legg inn følgende kode i welcome.blade.php-filen din:
<div id="vue-app">
{{ text }}
</div>
<script>
window.vueApp = new Vue({
el: '#vue-app',
data: {
text: 'Hello World from Vue!'
}
});
</script>
Som du kan se har vi laget et element div
med id
"vue-app
". Inne i skriptelementet har vi laget en forekomst av Vue, der vi sender til konstruktøren et objekt som lar oss definish noen applikasjonsparametere, for eksempel data og atferd, i vårt tilfelle:
div
defiferdig i htmlSå snart objektet er opprettet, Vue
skaffer seg div
med id vue-app
og tar seg av å erstatte plassholderen {{ text }}
med verdien i dataobjektet. Selvfølgelig kan dette objektet inneholde mer enn én egenskap, selv av forskjellige typer: tall, matriser og andre nestede objekter er gyldige
I tillegg til denne erstatningen har Vue også aktivert motoren sin og gjort applikasjonen responsiv, det vil si at enhver endring i tekstegenskapen vil føre til en umiddelbar oppdatering av det tilsvarende elementet i HTML-en.
For å fortsette til den andre prøveversjonen, må du først instansiere appen for å opprette en ny komponent. Du åpner resources/app.js
(o resources/js/app.js
) og oppdater innholdet som følger:
// resources/app.js
require('./bootstrap');
import { createApp } from 'vue';
import HelloVue from '../components/HelloVue.vue';
createApp({
components: {
HelloVue,
}
}).mount('#app');
I denne filen lager vi en ny Vue.js-instans, og for å gjøre dette trenger vi en Vue-komponent som vi har kalt HelloVue.vue. For mer informasjon se de offisielle dokumentene .
Opprett en ny fil resources/components/HelloVue.vue
og skriv inn følgende kode:
// resources/components/HelloVue.vue
<template>
<h1>Hello Vue!</h1>
</template>
<script>
export default {
name: 'HelloVue'
}
</script>
Filen vi nettopp opprettet er en grunnleggende Vue.js-komponent som skrives ut Hello Vue!
Kom header1
på siden. Til slutt åpner du webpack.mix.js
fil i prosjektroten og oppdater innholdet som følger:
// 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', [
//
]);
I denne filen kalles metoden .vue()
vil kompilere eventuell Vue.js-kode og pakke den inn i produksjons-JavaScript-filen. Funksjonen aksepterer et objekt der du kan defifullfør versjonen av Vue.js du bruker.
Etter å ha redigert filen webpack.mix.js
du må kompilere javascript-koden. For å gjøre dette, kjører vi kommandoen på nytt npm run dev
.
Til slutt, for å prøve Vue operasjonelt, åpne filen resources/views/welcome.blade.php
og skriv inn følgende kode:
<!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>
Koden, sammen med den tidligere opprettede komponenten, vil produsere en videomelding Hei Vue!, på grunn av at Vue.js-forekomsten er montert på et HTML-element med id
app
.
Kjør applikasjonen din med php artisan serve
, og åpne den i favorittnettleseren din.
Ercole Palmeri
Du kan også være interessert i ...
Resultat av konstant teknologisk innovasjon og engasjement for miljø og menneskers velvære. Bandalux presenterer Airpure®, et telt...
Designmønstre er spesifikke lavnivåløsninger på tilbakevendende problemer innen programvaredesign. Designmønstre er...
Magica er iPhone-appen som gjør kjøretøyadministrasjon enkel og effektiv, og hjelper sjåfører med å spare og...
Et Excel-diagram er en visualisering som representerer data i et Excel-regneark...