Vue.js untuk Pemula #2: Membuat Aplikasi Notes Sederhana

Vue.js adalah sebuah framework JavaScript yang sangat populer dan digunakan untuk membuat aplikasi web interaktif. Dalam tutorial ini, kita akan membuat aplikasi catatan sederhana menggunakan Vue.js dan Vite.js sebagai build tool.

Vite.js adalah build tool yang baru dan cepat untuk Vue.js yang memfokuskan pada pengembangan aplikasi berkecepatan tinggi. Ini akan membuat proses membangun aplikasi menjadi lebih mudah dan cepat.

Untuk memulai, Anda perlu memastikan bahwa Anda memiliki Node.js dan npm (Node Package Manager) terinstal di komputer Anda. Jika belum, silakan mengunduh dan menginstal dari situs resminya.

Langkah 1: Instalasi Vite.js

Buka terminal Anda dan jalankan perintah berikut untuk membuat direktori proyek baru:

mkdir notes-app
cd notes-app

Kemudian jalankan perintah berikut untuk membuat aplikasi baru dengan Vue.js menggunakan Vite.js CLI:

npm init vite-app

Langkah 2: Menambahkan Komponen

Buat file baru App.vue di direktori src dan tambahkan kode berikut:

<template>
  <div>
    <h1>Notes App</h1>
    <div>
      <input type="text" v-model="newNote" @keyup.enter="addNote">
      <button @click="addNote">Add Note</button>
    </div>
    <ul>
      <li v-for="(note, index) in notes" :key="index">
        {{ note }}
        <button @click="deleteNote(index)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      notes: [],
      newNote: ''
    }
  },
  methods: {
    addNote() {
      this.notes.push(this.newNote)
      this.newNote = ''
    },
    deleteNote(index) {
      this.notes.splice(index, 1)
    }
  }
}
</script>

Langkah 3: Menjalankan Aplikasi

Untuk menjalkan aplikasi, buka terminal dan jalankan perintah berikut:

npm run dev

Ini akan membuka aplikasi Anda pada browser default dengan alamat http://localhost:3000. Anda dapat menambahkan catatan baru dengan mengetik pada kotak teks dan menekan tombol "Add Note". Anda juga dapat menghapus catatan dengan menekan tombol "Delete" pada setiap catatan.

Dengan demikian, Anda sudah berhasil membuat aplikasi catatan sederhana menggunakan Vue.js dan Vite.js. Ini hanya sebagai awal dan Anda masih bisa memperluas aplikasi ini dengan fitur-fitur tambahan seperti menyimpan catatan ke database, menampilkan tanggal pembuatan catatan, dan lain-lain.

Sekian tutorial membuat aplikasi notes sederhana dengan Vue.js dan Vite.js untuk pemula. Semoga membantu dan menambah wawasan Anda dalam membuat aplikasi web menggunakan Vue.js.

Demo Aplikasi

Anda dapat mengakses demo Aplikasinya melalui Stackblitz disini