Belajar Vue - Pre-Requisites Skill & Setup Environment

#Pendahuluan

Selamat datang di series Belajar Vue! Series ini akan membawa kalian menguasai Vue.js — progressive JavaScript framework untuk membangun user interface yang reaktif — dari konsep dasar sampai production readiness. Total ada 24 episode yang tersusun dari enam fase, dimulai dari fondasi di episode ini.

Tapi sebelum menyentuh create-vue, ada beberapa skill dasar dan perangkat lunak yang wajib kalian miliki. Mengapa prasyarat ini penting? Karena Vue bukan kotak ajaib. Template yang kalian tulis berubah menjadi operasi DOM, state berubah menjadi re-render, dan semua itu berjalan di atas JavaScript. Kalau fondasi HTML, CSS, dan JavaScript belum kuat, seluruh series ini akan terasa seperti membaca bahasa asing.

Episode 0 ini adalah peta jalan kalian: kita akan memastikan skill dasar, menyiapkan Node.js dan editor, lalu membuat project Vue pertama dengan Vite. Setelah episode ini selesai, seluruh series bisa diikuti dengan nyaman.

#Skill Dasar yang Wajib Dikuasai

#HTML, CSS, dan JavaScript Modern

Vue merender template yang sebagian besar berwujud HTML, menghiasinya dengan CSS, dan mengendalikan semuanya dengan JavaScript. Kalian wajib nyaman dengan:

• HTML: struktur elemen, atribut, form, dan semantic tags.
• CSS: selector, box model, flexbox, grid, dan class styling.
• JavaScript ES6+: arrow functions, destructuring, spread operator, promise, async/await, dan modules.

Tanpa tiga fondasi ini, directive seperti v-for dan composable seperti ref tidak akan masuk akal.

#DOM, Event Handling, dan Konsep Reaktif

Vue menyembunyikan banyak detail DOM dari kalian, tapi pemahaman dasar tetap wajib. Kenali apa itu document.querySelector, bagaimana event seperti click mengalir, dan mengapa re-render penuh menjadi mahal. Pahami juga konsep reactive programming: data berubah, dan UI menyesuaikan diri secara otomatis.

state berubah -> dependency tracking -> re-render bagian yang terdampak

#Command Line, Git, dan Package Manager

Hampir semua pekerjaan Vue dimulai dari terminal. Kalian harus bisa berpindah direktori, menginstall dependency, dan menjalankan script:

cd my-app
npm install
npm run dev
git status

npm install menarik dependency, npm run dev menjalankan server development, dan git status menampilkan perubahan yang belum di-commit. Kebiasaan ini akan kalian pakai hampir di setiap episode.

#Perangkat Lunak yang Perlu Disiapkan

#Node.js LTS dan Package Manager

Vue 3 dan toolchain-nya berjalan di atas Node.js. Install Node.js LTS terbaru dari situs resmi atau lewat Node Version Manager. Setelah terinstall, verifikasi:

node --version
npm --version

Output node --version harus menunjukkan versi 18 ke atas, dan npm --version versi 9 ke atas. Seluruh series ini memakai npm, tapi pnpm dan yarn juga bekerja dengan baik.

#VS Code dan Ekstensi Wajib

Editor yang direkomendasikan adalah VS Code dengan tiga ekstensi ini:

• Vue - Official (Volar): syntax highlighting dan IntelliSense untuk Single File Components.
• ESLint: menampilkan error dan warning langsung saat mengetik.
• Prettier: memformat kode secara konsisten.

Dengan Volar terpasang, kalian mendapat type-checking, auto-import komponen, dan refactoring yang cerdas untuk file .vue.

#Browser Modern dan Sumber Daya Sistem

Gunakan browser modern seperti Chrome, Firefox, atau Edge beserta Vue Devtools — ekstensi browser yang akan dipakai untuk debugging di episode 15. Untuk sistem operasi, Windows, macOS, maupun Linux semuanya didukung; minimum 8GB RAM disarankan agar dev server, browser, dan editor berjalan mulus bersamaan.

#Setup Environment dan Project Vue Pertama

#Membuat Project dengan Vite

Setelah Node.js siap, buat project Vue resmi dengan scaffolder create-vue. Perintah ini memakai Vite sebagai build tool modern:

npm create vue@latest my-vue-app
cd my-vue-app
npm install

npm create vue@latest akan menanyakan beberapa opsi seperti TypeScript dan ESLint. Untuk sekarang, pilih opsi default saja; kombinasi lengkap akan kita bahas di episode 3 dan episode 19.

#Menjalankan Dev Server

Jalankan server development untuk memastikan semuanya berfungsi:

npm run dev

Output akan menampilkan URL seperti http://localhost:5173. Buka URL tersebut di browser dan kalian akan melihat halaman selamat datang Vue. Tekan Ctrl+C untuk menghentikan server. Fitur hot module replacement yang akan kita bedah di episode 3 sudah aktif sejak pertama kali.

#Verifikasi Environment

Sebelum lanjut ke episode 1, jalankan verifikasi cepat bahwa seluruh prasyarat sudah lengkap:

node --version && npm --version && git --version

Jika ketiga versi muncul tanpa error, environment kalian sudah siap. Tambahkan Git sebagai langkah terakhir — inisialisasi repository di direktori project:

git init
git add .
git commit -m "chore: project Vue pertama"

Perintah git init menginisialisasi repository, dan commit pertama git commit -m "chore: project Vue pertama" menandai awal proyek. Dari sini kalian bisa beranjak ke episode berikutnya dengan tenang.

#Penutup

Di episode 0 ini kalian sudah menyiapkan pijakan untuk seluruh series: memahami skill dasar HTML, CSS, dan JavaScript modern, menyiapkan Node.js LTS dan VS Code dengan Volar, membuat project Vue pertama dengan Vite, dan memverifikasi bahwa dev server berjalan.

Inti yang harus dibawa pulang:

• Vue dibangun di atas JavaScript: kuasai dulu HTML, CSS, dan ES6+.
• Pahami alur reaktivitas: state berubah, UI menyesuaikan diri.
• Node.js LTS dengan npm versi 9 ke atas adalah syarat mutlak.
• Pasang Volar, ESLint, dan Prettier di VS Code.
• npm create vue@latest adalah cara resmi memulai project Vue 3.
• Git dan commit awal memastikan setiap percobaan bisa dikembalikan.

Di episode 1 selanjutnya kita akan membahas sejarah, latar belakang, dan mengapa membutuhkan Vue — dari kelahiran Vue 1 oleh Evan You, pendekatan incremental adoption sebagai progressive framework, hingga perbandingannya dengan React dan framework frontend lain. Pastikan environment kalian sudah siap, karena perjalanan Belajar Vue baru saja dimulai!