• Apa Itu Vue.js?
• Kenapa Harus Belajar Vue?
• Langkah 1 - Installasi Node.js
• Langkah 2 - Membuat Proyek Vue dengan Vite
• Langkah 3 - Struktur Folder Proyek Vue (Vite)
• Kesimpulan

Halo teman-teman semuanya, pada seri artikel kali ini kita akan bersama-sama mempelajari konsep-konsep dasar Vue.js mulai dari pengenalan, instalasi, hingga membangun proyek sederhana dengan Vite.

Semoga dengan seri ini, kita bisa memahami pondasi Vue dengan lebih kuat dan siap untuk melangkah ke tahap berikutnya.

Apa Itu Vue.js?

Vue.js adalah progressive framework JavaScript untuk membangun antarmuka pengguna (User Interface). Vue sangat populer karena mudah dipelajari, ringan, fleksibel, dan memiliki ekosistem yang kuat.

Kenapa Harus Belajar Vue?

• Mudah Dipelajari: Sintaks mirip HTML & JavaScript biasa.
• Populer: Digunakan oleh banyak perusahaan dan komunitas besar.
• Ringan & Cepat: Ukuran kecil tapi performa tinggi.
• Ekosistem Lengkap: Vue Router untuk routing, Pinia untuk state management, dan banyak plugin lain.

Langkah 1 - Installasi Node.js

Sama seperti React, Vue juga membutuhkan Node.js untuk menjalankan server pengembangan dan mengelola dependensi dengan NPM.

Silakan teman-teman download Node.js di situs resmi dan pilih versi LTS (Long Term Support) agar lebih stabil.

https://nodejs.org/en/download

Setelah selesai, pastikan instalasi berhasil dengan perintah berikut di terminal/CMD:

node --version

npm --version

Jika muncul versi Node.js dan NPM, artinya instalasi berhasil.

Langkah 2 - Membuat Proyek Vue dengan Vite

Silahkan teman-teman masuk ke dalam folder dimana akan menyimpan proyek-nya, kemudian buka terminal, dan jalankan perintah berikut:

npm create vite@latest belajar-vue-dasar

Setelah itu:

1. Pilih framework: Vue

2. Pilih variant: JavaScript

3. Masuk ke folder proyek:

   cd belajar-vue-dasar
   

4. Install dependensi:

   npm install
   

5. Jalankan server pengembangan:

   npm run dev
   

Jika berhasil, buka browser lalu ketik http://localhost:5173. Maka, proyek Vue pertama kita sudah berjalan.

Langkah 3 - Struktur Folder Proyek Vue (Vite)

Setelah membuat proyek, berikut adalah struktur folder dasarnya:

belajar-dasar-vue/
│
├── node_modules/        # Folder berisi dependensi
├── public/              # Asset statis (gambar, favicon, dll)
├── src/                 # Tempat utama kode Vue
│   ├── assets/          # File aset tambahan
│   ├── components/      # Tempat komponen Vue
│   ├── App.vue          # Komponen utama aplikasi
│   ├── main.js          # Entry point aplikasi
│
├── package.json         # Informasi & dependensi proyek
├── vite.config.js       # Konfigurasi Vite

Kita akan banyak bekerja di dalam folder src/, terutama pada file App.vue dan komponen di folder components/.

Kesimpulan

Pada artikel ini, kita sudah berkenalan dengan Vue.js, memahami kenapa penting untuk dipelajari, menyiapkan Node.js dan NPM, serta membuat proyek Vue pertama menggunakan Vite. Kita juga sudah mengenal struktur folder dasar proyek Vue.

Di artikel berikutnya, kita akan belajar lebih dalam tentang Template Syntax, yaitu dasar penulisan tampilan di Vue.

Terima kasih