close

Menginstal Vue.js dan Membuat Proyek Pertama Anda

Untuk menginstal Vue.js, Anda dapat mengikuti langkah-langkah di bawah ini:

Langkah 1: Buat direktori baru untuk proyek Anda dan buka terminal di direktori tersebut.

Langkah 2: Gunakan npm untuk menginstal Vue CLI(Command Line Interface) dengan menjalankan perintah berikut:

npm install -g @vue/cli


Langkah 3: Setelah instalasi berhasil, Anda dapat membuat proyek Vue baru menggunakan perintah berikut:

vue create my-vue-project


Langkah 4: Pilih opsi konfigurasi untuk proyek Anda, termasuk menginstal Babel, ESLint, dan CSS Pre-processors(opsional).

Langkah 5: Setelah proses pembuatan proyek selesai, navigasikan ke direktori proyek menggunakan perintah:

cd my-vue-project


Langkah 6: Jalankan perintah berikut untuk memulai proyek Vue:

npm run serve


Setelah proses startup selesai, Anda akan melihat URL untuk mengakses aplikasi Vue Anda di browser.

Contoh sederhana Vue.js:

Mari buat file HTML baru dan beri nama index.html `. Dalam file ini, tambahkan kode berikut:

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>

Dalam contoh ini, kami telah membuat aplikasi Vue sederhana dengan h1 tag dan tombol. Ketika tombol diklik, pesan akan berubah.

Simpan index.html  file dan buka di browser. Anda akan melihat pesan awal sebagai "Hello Vue.js!". Saat Anda mengklik tombol tersebut, pesan akan berubah menjadi "Pesan berhasil diubah!".

Ini hanyalah contoh sederhana untuk membantu Anda memulai dengan Vue.js. Anda dapat menjelajahi lebih banyak fitur dan kapabilitas canggih Vue.js saat mengembangkan aplikasi Anda.