Por la disvolviĝo de TTT-aplikoj, vaste uzata ilo estas vuejs, kaj en ĉi tiu artikolo ni vidos kiel instali kaj uzi ĝin kun Laravel. La kadro Vue.js estis definokto progresema kadro ĉar ĝi estas specialigita en la kreado de HTML-vidoj, kaj permesas vin facile integriĝi kun komponantoj de aliaj bibliotekoj kaj projektoj.
La sukceso de Vue.js ankaŭ ŝuldiĝas al la elekto de Laravel sugesti ĝin kiel fasadkadron, tiel kondukante al la eldono de versio 2.0.
La unua paŝo estas, kompreneble, krei novan projekton en Laravel. Se vi havas unu en via komputilo, uzu ĝin aŭ vi povas krei novan nur por ĉi tiu lernilo.
composer create-project laravel/laravel guide-laravel-vuePost kiam la projekto komenciĝis, vi devos instali lesojn npm toksomanioj. Por fari tion, rulu la sekvan komandon ene de via projekta dosierujo:
npm installPost kiam la dependecoj estas instalitaj, rulu la sekvan komandon por konstrui la rimedojn kaj certigi, ke ĉio vere funkcias:
npm run devLa komando npm run dev elfaras diversajn kontrolojn kaj konstruojn, precipe Laravel Mix kompili la dosieron resources/js/app.js kaj la dosiero resources/css/app.css en dosieroj public/js/app.js e public/css/app.css.
Fininte se ĉio funkcias bone, vi vidos ion tian:
Post prepari la projekton Laravel, ni povas instali Vue.js 3. Por fari tion, rulu la jenan komandon en via projekta dosierujo:
npm install --save-dev vueĈi tio instalos Vue.js kiel unu el la evoluaj dependecoj. Post kompilo de la aktivoj, via produktada JavaScript-dosiero estos memstara, do vi nur bezonas instali Vue.js kiel evoluan dependecon.
Por certigi, ke Vue 3 estis ĝuste instalita, malfermu la dosieron package.json (ĉeestas en projekta radiko) kaj serĉu "vue" en la sekcio "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"
}
}Kiel vi povas vidi, la versio numero indikas, ke Vue.js 3 estis instalita.
En vian welcome.blade.php-dosieron metu la jenan kodon:
<div id="vue-app">
{{ text }}
</div>
<script>
window.vueApp = new Vue({
el: '#vue-app',
data: {
text: 'Hello World from Vue!'
}
});
</script>Kiel vi povas vidi ni kreis elementon div con id "vue-app“. Ene de la skripto-elemento ni kreis ekzemplon de Vue, kie ni transdonas al la konstrukciisto objekton, kiu ebligas al ni defifini iujn aplikajn parametrojn, kiel datumojn kaj kondutojn, en nia kazo:
div defifiniĝis en la htmlTuj kiam la objekto estas kreita, Vue akiras la div con id vue-app kaj zorgas pri anstataŭigo de la lokokupilo {{ text }} kun la valoro enhavita ene de la datuma objekto. Kompreneble, ĉi tiu objekto povas enhavi pli ol unu posedaĵon, eĉ de malsamaj tipoj: nombroj, tabeloj kaj aliaj nestitaj objektoj validas
Krom ĉi tiu anstataŭaĵo, Vue ankaŭ aktivigis sian motoron kaj igis la aplikaĵon respondema, t.e. ajna ŝanĝo al la tekstposedaĵo kaŭzos tujan ĝisdatigon de la responda elemento en la HTML.
Por daŭrigi la duan provon, vi unue devos krei la apon por krei novan komponanton. Vi malfermas resources/app.js (o resources/js/app.js) kaj ĝisdatigi ĝian enhavon jene:
// resources/app.js
require('./bootstrap');
import { createApp } from 'vue';
import HelloVue from '../components/HelloVue.vue';
createApp({
components: {
HelloVue,
}
}).mount('#app');En ĉi tiu dosiero ni kreas novan ekzemplon Vue.js, kaj por fari tion ni bezonas Vue-komponenton, kiun ni nomis HelloVue.vue. Por pliaj informoj konsultu la oficialajn dokumentojn .
Kreu novan dosieron resources/components/HelloVue.vue kaj enigu la sekvan kodon:
// resources/components/HelloVue.vue
<template>
<h1>Hello Vue!</h1>
</template>
<script>
export default {
name: 'HelloVue'
}
</script>La dosiero, kiun ni ĵus kreis, estas baza komponanto Vue.js, kiu presas Hello Vue! venu header1 sur la paĝo. Fine, malfermu la webpack.mix.js dosieron en la projekta radiko kaj ĝisdatigu ĝian enhavon jene:
// 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', [
//
]);En ĉi tiu dosiero, la metodo voko .vue() kompilos ajnan Vue.js-kodon kaj kunmetos ĝin en la produktan JavaScript-dosieron. La funkcio akceptas objekton kie vi povas defifini la version de Vue.js, kiun vi uzas.
Post redaktado de la dosiero webpack.mix.js vi devas kompili la javaskripto-kodon. Por fari tion, ni rulas la komandon denove npm run dev.
Fine, por provi Vue funkcie, malfermu la dosieron resources/views/welcome.blade.php kaj enigu la sekvan kodon:
<!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>La kodo, kune kun la antaŭe kreita komponanto, produktos videomesaĝon Saluton Vue!, pro la kazo Vue.js muntita sur HTML-elemento kun id app.
Rulu vian aplikaĵon uzante php artisan serve, kaj malfermu ĝin en via plej ŝatata retumilo.
Ercole Palmeri
Vi eble ankaŭ interesiĝos pri ...
Coveware de Veeam daŭre liveros servojn de respondaj incidentoj pri ciberĉantaĝo. Coveware ofertos krimmedicinajn kaj solvajn kapablojn...
Prognoza prizorgado revolucias la petrolon kaj gasan sektoron, kun noviga kaj iniciatema aliro al plantadministrado...
La UK CMA publikigis averton pri la konduto de Big Tech en la merkato de artefarita inteligenteco. Tie…
La Dekreto "Verdaj Domoj", formulita de Eŭropa Unio por plibonigi la energi-efikecon de konstruaĵoj, finis sian leĝdonan procezon per...