Če želite namestiti Vue.js, sledite spodnjim korakom:
1. korak: Ustvarite nov imenik za svoj projekt in odprite terminal v tem imeniku.
2. korak: uporabite npm za namestitev Vue CLI(vmesnik ukazne vrstice), tako da zaženete naslednji ukaz:
npm install -g @vue/cli
3. korak: Po uspešni namestitvi lahko ustvarite nov projekt Vue z naslednjim ukazom:
vue create my-vue-project
4. korak: izberite možnosti konfiguracije za svoj projekt, vključno z namestitvijo predprocesorjev Babel, ESLint in CSS(izbirno).
5. korak: Ko je postopek ustvarjanja projekta končan, se pomaknite v imenik projekta z ukazom:
cd my-vue-project
6. korak: Zaženite naslednji ukaz, da zaženete projekt Vue:
npm run serve
Ko je postopek zagona končan, boste v brskalniku videli URL za dostop do vaše aplikacije Vue.
Preprost primer Vue.js:
Ustvarimo novo datoteko HTML in jo poimenujmo index.html `. V to datoteko dodajte to kodo:
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> V tem primeru smo ustvarili preprosto aplikacijo Vue z h1 oznako in gumbom. Ko kliknete gumb, se sporočilo spremeni.
Shranite index.html datoteko in jo odprite v brskalniku. Začetno sporočilo boste videli kot "Hello Vue.js!". Ko kliknete gumb, se sporočilo spremeni v "Sporočilo uspešno spremenjeno!".
To je le preprost primer za lažji začetek uporabe Vue.js. Med razvijanjem aplikacij lahko raziščete veliko več funkcij in zmogljivih zmogljivosti Vue.js.