Kanggo nginstal Vue.js, sampeyan bisa tindakake langkah ing ngisor iki:
Langkah 1: Gawe direktori anyar kanggo proyek sampeyan lan bukak terminal ing direktori kasebut.
Langkah 2: Gunakake npm kanggo nginstal Vue CLI(Command Line Interface) kanthi nglakokake printah ing ngisor iki:
npm install -g @vue/cli
Langkah 3: Sawise instalasi sukses, sampeyan bisa nggawe proyek Vue anyar nggunakake printah ing ngisor iki:
vue create my-vue-project
Langkah 4: Pilih opsi konfigurasi kanggo proyek sampeyan, kalebu nginstal Babel, ESLint, lan CSS Pre-processors(opsional).
Langkah 5: Sawise proses nggawe proyek rampung, navigasi menyang direktori proyek nggunakake printah:
cd my-vue-project
Langkah 6: Jalanake printah ing ngisor iki kanggo miwiti proyek Vue:
npm run serve
Sawise proses wiwitan rampung, sampeyan bakal weruh URL kanggo ngakses aplikasi Vue ing browser.
Conto prasaja saka Vue.js:
Ayo nggawe file HTML anyar lan jenenge index.html `. Ing file iki, tambahake kode ing ngisor iki:
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> Ing conto iki, kita wis nggawe aplikasi Vue prasaja karo h1 tag lan tombol. Nalika tombol diklik, pesen bakal diganti.
Simpen index.html file lan mbukak ing browser. Sampeyan bakal weruh pesen dhisikan minangka "Hello Vue.js!". Nalika sampeyan ngeklik tombol kasebut, pesen bakal diganti dadi "Pesen diganti kanthi sukses!".
Iki mung conto prasaja kanggo miwiti karo Vue.js. Sampeyan bisa njelajah luwih akeh fitur lan kemampuan kuat Vue.js nalika ngembangake aplikasi sampeyan.