Sebelomnya di Vue JS untuk Pemula
Di episode pertama, kita udah explore konsep dasar Vue JS. Mulai dari apa itu Vue, gimana cara kerjanya, sampai kenapa Vue jadi pilihan banyak developer yang pengen belajar framework yang user-friendly. Kita juga udah bahas tentang deklaratif programming, reaktivitas, dan gimana Vue bikin coding jadi lebih simpel dibanding plain JavaScript.
Tapi hey, teori doang ga cukup kan? Kita semua tahu bahwa untuk benar-benar mahir programming, kita perlu ngoding. Kita perlu berinvestasi waktu dengan aktual membuat project, bukan cuma ngomong doang tentang konsep.
Waktunya Praktek Beneran
Nah, di episode kali ini, kita bakal step-up ke level yang lebih konkrit. Saatnya nulis kode beneran, install tools yang diperlukan, dan setup project Vue JS pertama kamu di computer lokal. Ini bukan cuma baca-baca tutorial doang, tapi beneran hands-on experience.
Kita akan mulai dari hal paling dasar, yaitu instalasi Node JS. Kenapa? Karena tanpa Node JS, kita gabisa jalankan Vue JS dengan proper. Terus kita bakal setup project menggunakan create-vue yang bakal ngebuat folder dan file structure otomatis untuk kita.
Mari kita mulai!
Kenapa Harus Install Node JS Dulu?
Sebelom kita bisa bikin Vue JS project, ada satu hal yang wajib kita install terlebih dahulu: Node JS. Karena Vue JS membutuhkan npm, yang merupakan package manager untuk download library dan tools yang diperlukan project.
Bayangkan npm seperti Google Play Store tapi untuk code. Tanpa npm, kita gabisa manage dependencies dan project Vue JS kita gabisa jalan. Jadi Node JS adalah fondasi kritikal sebelum belajar Vue JS di BuildWithAngga.
Langkah-Langkah Download dan Instalasi
Proses instalnya cukup simpel. Buka nodejs.org dan download versi LTS (Long Term Support). Versi LTS lebih stabil dan recommended untuk pemula yang belajar di BuildWithAngga.
Setelah download selesai, jalankan installer dan klik next, next, next sampai selesai. Tidak ada setting rumit yang perlu dikhawatirkan. Setelah instalasi selesai, restart terminal atau komputer kamu untuk memastikan Node JS terregistrasi dengan baik.
Memverifikasi Instalasi Node JS
Buka terminal dan verifikasi dengan dua perintah ini:
node -v
npm -v
Jika berhasil, kamu akan melihat nomor versi untuk masing-masing. Untuk keperluan belajar, pastikan kamu punya minimal Node JS versi 16 dan NPM versi 7 atau lebih tinggi.
Troubleshooting Masalah Umum
Jika dapat error "command not found", coba restart terminal kamu. Biasanya ini sudah cukup mengatasi masalah.
Jika versi Node JS atau npm kamu masih lama, download ulang dari nodejs.org atau gunakan nvm (Node Version Manager) untuk manage multiple versi. Untuk pemula, cara pertama lebih simpel.
Setelah Node JS berhasil terverifikasi, kamu sudah siap lanjut ke step berikutnya: membuat project Vue JS menggunakan create-vue.
Membuat Project Vue JS Pertama Kamu
Sekarang saatnya kita buat project Vue JS pertama kamu menggunakan create-vue. Tool ini akan generate folder structure dan file-file yang diperlukan secara otomatis untuk kita.
Buka terminal dan ketik perintah ini:
npm create vue@latest
Perintah ini akan mendownload template Vue JS terbaru dan menampilkan beberapa pertanyaan untuk konfigurasi project kamu.
Setup Konfigurasi Project bwa-vue
Saat menjalankan perintah di atas, kamu akan melihat beberapa pertanyaan setup. Ikuti konfigurasi berikut untuk project yang dinamakan bwa-vue:
Perhatikan bahwa nama project yang kita gunakan adalah bwa-vue, mengambil inisial dari BuildWithAngga. Ini akan menjadi folder project kamu.
Memahami Setiap Pilihan Konfigurasi
TypeScript kita pilih No karena ini advanced topic. Fokus kita sekarang adalah Vue JS fundamentals agar tidak overwhelming.
Vue Router kita pilih Yes karena kita akan butuh ini untuk multi-page aplikasi di episode mendatang. Lebih baik install sekarang.
Pinia adalah state management untuk Vue. Kita pilih Yes karena akan kita pelajari di episode berikutnya. Install sekarang membuat proses belajar lebih smooth.
ESLint dan Prettier adalah code quality tools. ESLint catch error, Prettier format kode dengan rapi. Keduanya recommended untuk membangun habit coding yang baik sejak awal.
Instalasi Dependencies dan Menjalankan Project
Setelah konfigurasi selesai, navigate ke folder project dan install dependencies:
cd bwa-vue
npm install
Tunggu 1 sampai 3 menit sampai proses selesai. Setelah selesai, jalankan development server:
npm run dev
Kamu akan melihat output menunjukan server berjalan di localhost:5173. Buka browser dan akses http://localhost:5173.
Project Vue JS Kamu Sudah Running
Selamat! Jika browser kamu menampilkan halaman Vue JS di localhost:5173, berarti project kamu sudah running dengan sempurna. Kamu sekarang punya development environment yang siap untuk belajar di BuildWithAngga.
Project bwa-vue ini akan menjadi playground kamu untuk eksplorasi Vue JS lebih lanjut. Setiap fitur dan konsep yang kita pelajari akan diimplementasikan di project ini. Pahami struktur folder yang ada, karena pemahaman ini akan sangat berguna di episode selanjutnya.
Kenali Struktur Folder Project Kamu
Setelah project bwa-vue running, saatnya kita pahami struktur folder yang diciptakan create-vue. Berikut adalah struktur root directory project kamu:
bwa-vue/
├── node_modules/ ← Dependencies (jangan diutak-atik!)
├── public/ ← Static files
├── src/ ← TEMPAT CODING (PENTING!)
├── index.html ← Entry point
├── package.json ← Project config
└── vite.config.js ← Build tool config
Folder src adalah tempat paling penting karena di sana kita menulis semua kode Vue JS. Folder node_modules berisi semua library yang sudah diinstall, jangan disentuh.
Folder src, Tempat Utama Kita Coding
Di dalam folder src, ada beberapa subfolder yang masing-masing punya fungsi spesifik. Ini adalah struktur yang akan kita gunakan untuk organize kode kita:
src/
├── assets/ ← Images, CSS
├── components/ ← Reusable components
├── router/ ← Vue Router setup
├── stores/ ← Pinia stores
├── views/ ← Pages/halaman
├── App.vue ← Root component
└── main.js ← Entry point JS
Masing-masing subfolder punya fungsi spesifik. Assets untuk gambar dan CSS statis. Components untuk reusable UI pieces seperti button, card, atau navbar. Router untuk konfigurasi multi-page aplikasi.
Stores adalah tempat state management dengan Pinia. Views adalah halaman-halaman lengkap aplikasi yang terdiri dari beberapa components. App.vue adalah root component dan main.js adalah entry point JavaScript.
Perbedaan Components dan Views
Components adalah reusable UI pieces seperti button, card, atau navbar. Kamu buat sekali dan bisa dipakai berkali-kali.
Views adalah halaman lengkap yang terdiri dari beberapa components. Contohnya halaman home, profile, atau settings. Pola umumnya adalah: Views menggunakan Components.
File-File Krusial yang Perlu Kamu Tahu
App.vue adalah root component dari aplikasi. Semua component lain akan di-render di sini.
main.js adalah entry point JavaScript. File ini menginisialisasi Vue app dan mount aplikasi ke DOM.
package.json berisi konfigurasi project termasuk daftar dependencies dan scripts yang tersedia. Setiap kali install library baru, file ini update otomatis.
Dengan memahami struktur ini, kamu akan lebih mudah navigate kode di BuildWithAngga dan membangun habit coding yang baik sejak awal.
Struktur Dasar File Vue Component
Setiap file Vue component punya struktur yang sama. Mari kita lihat contoh dari file App.vue yang ada di project bwa-vue kamu. Contoh kode di bawah ini adalah struktur umum Vue component (bisa berbeda tergantung versi Vue yang kamu gunakan):
<script setup>
// JavaScript - Logic
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<!-- HTML - UI -->
<h1>{{ count }}</h1>
<button @click="count++">Click</button>
</template>
<style scoped>
/* CSS - Styling */
h1 {
color: #42b883;
}
</style>
File Vue component terdiri dari tiga bagian utama: script setup, template, dan style scoped.
Tiga Bagian Penting Vue Component
Bagian <script setup> berisi logic, data, dan function untuk component. Semua yang dideklarasikan di sini bisa langsung digunakan di template.
Bagian <template> adalah HTML markup untuk UI. Kita akses data dari script setup dengan {{ count }} atau directive seperti @click.
Bagian <style scoped> adalah CSS. Scoped berarti CSS hanya berlaku untuk component ini saja, tidak mempengaruhi component lain.
Kenapa Script Setup?
Script setup adalah cara modern Vue 3 untuk menulis component. Lebih sederhana, minim boilerplate, dan auto imports. Ini adalah way yang recommended dan akan kita gunakan sebagai standard untuk semua component yang dibuat.
Membuat Hello World Vue JS
Buka file App.vue di project bwa-vue dan hapus semua kode. Ganti dengan kode berikut:
<script setup>
import { ref } from 'vue'
const message = ref('Hello Vue.js!')
const count = ref(0)
</script>
<template>
<div class="app">
<h1>{{ message }}</h1>
<p>Count: {{ count }}</p>
<button @click="count++">Click Me!</button>
</div>
</template>
<style scoped>
.app {
text-align: center;
margin: 50px;
font-family: Arial, sans-serif;
}
h1 {
color: #42b883;
}
button {
padding: 10px 20px;
font-size: 16px;
background: #42b883;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background: #35495e;
}
</style>
Kode ini membuat dua reactive variables: message dan count. Template menampilkan message di heading dan count di paragraf. Button akan increment count setiap kali diklik.
Testing Hello World Pertama
Save file dengan Ctrl+S. Browser otomatis update karena Hot Reload, kamu tidak perlu refresh manual.
Klik button "Click Me!" beberapa kali. Lihat angka count naik setiap klik. Inilah reactivity. Data berubah, UI otomatis ter-update tanpa perlu manual DOM manipulation.
Apa yang Terjadi di Behind the Scenes
Saat kamu klik button, event @click di-trigger. Event handler count++ akan increment value dari count. Vue mendeteksi perubahan dan otomatis update template dengan value count yang baru.
Inilah reactivity yang jadi core dari Vue JS. Konsep ini membuat coding jauh lebih intuitif dan less verbose dibanding plain JavaScript.
Selamat! Kamu Udah Berhasil Capai Milestone Penting
Kamu berhasil install Node JS, membuat project bwa-vue, memahami struktur folder, membuat Hello World pertama, dan install tools yang diperlukan. Itu semua sudah kamu capai di episode ini.
Development Environment Siap, Coding Dimulai!
Kamu sekarang punya working Vue JS project dan development environment yang lengkap. Kamu punya solid foundation untuk melanjutkan journey belajar Vue JS. BuildWithAngga memberikan roadmap jelas untuk terus berkembang ke level berikutnya.
Lanjutkan Belajar di BuildWithAngga
Sekarang foundation kamu udah kuat, saatnya masuk ke kelas berikutnya di BuildWithAngga. Di sana kamu akan dapat video tutorial step-by-step, source code lengkap, dan mentoring dari instructor berpengalaman. BuildWithAngga menyediakan platform pembelajaran yang dirancang khusus untuk membuat kamu sukses kerja remote dengan skill Vue JS yang solid.
Jangan hanya berhenti di sini. Konsistensi adalah kunci untuk menguasai Vue JS. Setiap episode di BuildWithAngga didesain untuk membangun skill kamu secara bertahap dan aplikatif. Bergabunglah dengan ribuan developer Indonesia yang udah sukses belajar dan mendapatkan pekerjaan remote melalui BuildWithAngga.
Next Level Menanti Kamu di Episode Tiga
Episode tiga akan explore reactive data, directives, dan computed properties. Kita akan mulai real coding yang lebih kompleks dan aplikatif. Siapkan mindset kamu untuk konsep-konsep baru yang akan membuka level lebih tinggi dalam Vue JS development.
Sampai jumpa di episode tiga di BuildWithAngga!
