Për të instaluar Vue.js, mund të ndiqni hapat e mëposhtëm:
Hapi 1: Krijoni një drejtori të re për projektin tuaj dhe hapni terminalin në atë direktori.
Hapi 2: Përdorni npm për të instaluar Vue CLI(Ndërfaqja e linjës së komandës) duke ekzekutuar komandën e mëposhtme:
npm install -g @vue/cli
Hapi 3: Pas instalimit të suksesshëm, mund të krijoni një projekt të ri Vue duke përdorur komandën e mëposhtme:
vue create my-vue-project
Hapi 4: Zgjidhni opsionet e konfigurimit për projektin tuaj, duke përfshirë instalimin e paraprocesorëve Babel, ESLint dhe CSS(opsionale).
Hapi 5: Pasi të përfundojë procesi i krijimit të projektit, lundroni në drejtorinë e projektit duke përdorur komandën:
cd my-vue-project
Hapi 6: Ekzekutoni komandën e mëposhtme për të nisur projektin Vue:
npm run serve
Pasi të përfundojë procesi i nisjes, do të shihni një URL për të hyrë në aplikacionin tuaj Vue në shfletues.
Një shembull i thjeshtë i Vue.js:
Le të krijojmë një skedar të ri HTML dhe ta emërojmë atë index.html `. Në këtë skedar, shtoni kodin e mëposhtëm:
html
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<button @click="changeMessage">Change Message</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
changeMessage() {
this.message = 'Message changed successfully!';
}
}
});
</script>
</body>
</html> Në këtë shembull, ne kemi krijuar një aplikacion të thjeshtë Vue me një h1 etiketë dhe një buton. Kur klikohet butoni, mesazhi do të ndryshojë.
Ruani index.html skedarin dhe hapeni në shfletuesin. Mesazhin fillestar do ta shihni si "Përshëndetje Vue.js!". Kur klikoni butonin, mesazhi do të ndryshojë në "Mesazhi u ndryshua me sukses!".
Ky është vetëm një shembull i thjeshtë për të filluar me Vue.js. Mund të eksploroni shumë më tepër veçori dhe aftësi të fuqishme të Vue.js gjatë zhvillimit të aplikacioneve tuaja.