Għall-iżvilupp ta 'apps tal-web, għodda użata ħafna hija vuejs, u f'dan l-artikolu se naraw kif tinstallaha u tużaha ma' Laravel. Il-qafas Vue.js kien defilejla progressiv minħabba li hija speċjalizzata fil-ħolqien ta 'veduti HTML, u tippermettilek tintegra faċilment ma' komponenti ta 'libreriji u proġetti oħra.
Is-suċċess ta 'Vue.js huwa wkoll dovut għall-għażla ta' Laravel biex jissuġġerixxiha bħala qafas frontend, u b'hekk iwassal għar-rilaxx tal-verżjoni 2.0.
L-ewwel pass huwa, ovvjament, li jinħoloq proġett ġdid f'Laravel. Jekk għandek waħda fuq il-kompjuter tiegħek, użaha jew tista' toħloq waħda ġdida biss għal dan it-tutorja.
composer create-project laravel/laravel guide-laravel-vue
Wara li l-proġett ikun beda, ser ikollok bżonn tinstalla l- npm
vizzji. Biex tagħmel dan, mexxi l-kmand li ġej fid-direttorju tal-proġett tiegħek:
npm install
Ladarba d-dipendenzi jiġu installati, ħaddem il-kmand li ġej biex tibni r-riżorsi u kun żgur li kollox jaħdem verament:
npm run dev
Il-kmand npm run dev
iwettaq varjetà ta 'kontrolli u jikkompila, b'mod partikolari Laravel Mix
ikkumpila l-fajl resources/js/app.js
u l-fajl resources/css/app.css
fil-fajls public/js/app.js
e public/css/app.css
.
Meta jkun lest jekk kollox jaħdem sew, tara xi ħaġa bħal din:
Wara li nippreparaw il-proġett Laravel, nistgħu nipproċedu biex ninstallaw Vue.js 3. Biex tagħmel dan, mexxi l-kmand li ġej fid-direttorju tal-proġett tiegħek:
npm install --save-dev vue
Dan se jinstalla Vue.js bħala waħda mid-dipendenzi tal-iżvilupp. Wara li tikkompila l-assi, il-fajl JavaScript tal-produzzjoni tiegħek se jkun awtonomu, għalhekk għandek bżonn biss tinstalla Vue.js bħala dipendenza tal-iżvilupp.
Biex tiżgura li Vue 3 ġie installat sew, iftaħ il-fajl package.json
(preżenti fl-għerq tal-proġett) u fittex "vue"
fit-taqsima "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"
}
}
Kif tistgħu taraw, in-numru tal-verżjoni jindika li Vue.js 3 ġie installat.
Fil-fajl welcome.blade.php tiegħek poġġi l-kodiċi li ġej:
<div id="vue-app">
{{ text }}
</div>
<script>
window.vueApp = new Vue({
el: '#vue-app',
data: {
text: 'Hello World from Vue!'
}
});
</script>
Kif tistgħu taraw ħloqna element div
ma id
"vue-app
“. Ġewwa l-element tal-iskript ħloqna eżempju ta' Vue, fejn ngħaddu lill-kostruttur oġġett li jippermettilna defitlesti xi parametri tal-applikazzjoni, bħad-dejta u l-imġieba, fil-każ tagħna:
div
defilest fl-htmlHekk kif l-oġġett jinħoloq, Vue
jakkwista l- div
ma id vue-app
u jieħu ħsieb li jissostitwixxi l-placeholder {{ text }}
bil-valur li jinsab fl-oġġett tad-dejta. Ovvjament, dan l-oġġett jista’ jkun fih aktar minn proprjetà waħda, anke ta’ tipi differenti: numri, arrays u oġġetti oħra nested huma validi
Minbarra din is-sostituzzjoni, Vue attivat ukoll il-magna tagħha u għamlet l-applikazzjoni tirrispondi, jiġifieri kwalunkwe bidla fil-proprjetà tat-test tikkawża aġġornament immedjat tal-element korrispondenti fl-HTML.
Biex tipproċedi għat-tieni prova, l-ewwel ikollok bżonn tagħti istanzija tal-app biex toħloq komponent ġdid. Int tiftaħ resources/app.js
(o resources/js/app.js
) u aġġorna l-kontenut tiegħu kif ġej:
// resources/app.js
require('./bootstrap');
import { createApp } from 'vue';
import HelloVue from '../components/HelloVue.vue';
createApp({
components: {
HelloVue,
}
}).mount('#app');
F'dan il-fajl qed noħolqu istanza Vue.js ġdida, u biex nagħmlu dan neħtieġu komponent Vue li sejjaħna HelloVue.vue. Għal aktar informazzjoni ikkonsulta d-dokumenti uffiċjali .
Oħloq fajl ġdid resources/components/HelloVue.vue
u daħħal il-kodiċi li ġej:
// resources/components/HelloVue.vue
<template>
<h1>Hello Vue!</h1>
</template>
<script>
export default {
name: 'HelloVue'
}
</script>
Il-fajl li għadna kemm ħloqna huwa komponent Vue.js bażiku li jistampa Hello Vue!
Come header1
fuq il-paġna. Fl-aħħarnett, tiftaħ il- webpack.mix.js
fajl fl-għerq tal-proġett u aġġorna l-kontenut tiegħu kif ġej:
// 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', [
//
]);
F'dan il-fajl, is-sejħa tal-metodu .vue()
se jikkompila kwalunkwe kodiċi Vue.js u jgħaqqadha fil-fajl JavaScript tal-produzzjoni. Il-funzjoni taċċetta oġġett fejn tista' defitlesti l-verżjoni ta' Vue.js li qed tuża.
Wara li teditja l-fajl webpack.mix.js
għandek bżonn tiġbor il-kodiċi javascript. Biex tagħmel dan, nerġgħu nħaddmu l-kmand npm run dev
.
Fl-aħħarnett, biex tipprova Vue b'mod operattiv, iftaħ il-fajl resources/views/welcome.blade.php
u daħħal il-kodiċi li ġej:
<!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>
Il-kodiċi, flimkien mal-komponent maħluq qabel, se jipproduċi messaġġ bil-vidjo Hello Vue!, minħabba li l-istanza Vue.js qed tiġi mmuntata fuq element HTML bi id
app
.
Mexxi l-applikazzjoni tiegħek billi tuża php artisan serve
, u tiftaħha fil-browser favorit tiegħek.
Ercole Palmeri
Jista 'jkun ukoll interessat fi ...
Is-CMA tar-Renju Unit ħarġet twissija dwar l-imġieba ta 'Big Tech fis-suq tal-intelliġenza artifiċjali. Hemm…
Id-Digriet "Case Green", ifformulat mill-Unjoni Ewropea biex itejjeb l-effiċjenza enerġetika tal-bini, ikkonkluda l-proċess leġiżlattiv tiegħu bi...
Ir-rapport annwali ta' Casaleggio Associati dwar il-Kummerċ elettroniku fl-Italja ppreżentat. Rapport intitolat “AI-Commerce: il-fruntieri tal-Kummerċ Elettroniku bl-Intelliġenza Artifiċjali”.…
Riżultat ta 'innovazzjoni teknoloġika kostanti u impenn għall-ambjent u l-benessri tan-nies. Bandalux jippreżenta Airpure®, tinda...