Pernah nggak, kamu semangat banget mau belajar sesuatu yang baru, buka laptop, lalu... bingung mau mulai dari mana? Kayak mau masak tapi kompor belum nyala, bahan belum ada, dan dapur masih berantakan. Itulah rasanya belajar coding tanpa setup lingkungan yang bener. Makanya, sebelum kita ngulik instalasi Vue 3 dan nulis satu baris pun kode Vue, kita beresin dulu "dapur"-nya.
Di artikel ini — bagian dari seri 16 Artikel Belajar Vue: Vue from Zero to Zorro — kamu akan melakukan setup vue 3 secara lengkap: dari install Node.js, pasang VS Code, sampai bikin proyek pertama dengan Vite vue 3. Semua step ada di sini, nggak ada yang di-skip.
Lingkungan Coding adalah kumpulan tools yang harus kamu install sebelum bisa menulis dan menjalankan kode. Untuk Vue 3, kamu butuh tiga komponen utama: Node.js (runtime JavaScript), VS Code (editor kode), dan Vite (build tool super cepat untuk proyek Vue 3).
🟢 Step 1: Instalasi Node.js — Fondasi dari Segalanya
Bayangkan Node.js seperti mesin mobil. Kamu punya bodi mobil (kode Vue 3 kamu), tapi tanpa mesin, mobil itu cuma pajangan. Node.js adalah mesin yang bikin JavaScript bisa "jalan" di luar browser — di komputer kamu langsung. Tanpa Node.js, semua tool Vue, termasuk Vite, nggak bisa dipakai.
Vite — build tool yang dipakai untuk setup vue 3 modern — membutuhkan Node.js versi 18 ke atas. Jangan install versi lama, nanti malah error yang nggak karuan!
Kunjungi nodejs.org dan pilih versi LTS (Long Term Support) — bukan yang "Current". Versi LTS lebih stabil dan cocok untuk belajar maupun production.
Windows: download file .msi lalu klik next-next-finish. Mac: download .pkg. Linux: gunakan package manager.
Setelah install, buka terminal (CMD / PowerShell / Terminal) dan ketik:
node --version npm --version
v20.11.0
10.2.4
Kalau kamu sering gonta-ganti proyek dengan versi Node.js berbeda, pertimbangkan install nvm (Node Version Manager). Dengan nvm, kamu bisa punya banyak versi Node.js dan switch kapan saja hanya dengan satu perintah.
🔵 Step 2: Setup VS Code — Editor yang Bakal Jadi Teman Sejatimu
VS Code itu seperti workshop tukang kayu yang lengkap. Kamu bisa nulis kode di Notepad biasa, tapi itu kayak nyerut kayu pakai tangan. VS Code kasih kamu semua alat yang tepat: syntax highlighting, autocomplete, terminal built-in, dan plugin khusus untuk Vue.
Kunjungi code.visualstudio.com, download versi Stable sesuai OS-mu, dan install seperti biasa.
Buka VS Code, tekan Ctrl+Shift+X untuk membuka panel Extensions, lalu cari dan install:
| Nama Extension | Fungsi | Prioritas |
|---|---|---|
| Vue - Official | Syntax highlighting, IntelliSense untuk Vue 3 | Wajib |
| ESLint | Deteksi error kode otomatis | Wajib |
| Prettier | Format kode otomatis biar rapi | Sangat Disarankan |
| Auto Rename Tag | Rename tag HTML/Vue otomatis | Opsional |
Extension "Vue - Official" adalah pengganti resmi dari "Vetur" yang dulu populer. Untuk proyek setup vue 3 modern, gunakan Vue - Official — ini yang direkomendasikan langsung oleh tim Vue.
🚀 Step 3: Bikin Proyek Vue 3 Pertamamu dengan Vite
Ini bagian yang paling seru! Sekarang kita akan melakukan instalasi vue 3 yang sesungguhnya — membuat proyek baru menggunakan Vite vue 3. Kenapa Vite? Karena Vite itu kayak motor sport vs sepeda ontel kalau dibanding cara lama (Vue CLI). Start servernya dalam hitungan milidetik. Nggak ada alasan pakai yang lain.
- Start server: < 300ms
- Hot Module Replacement instan
- Konfigurasi minimal
- Support TypeScript native
- Aktif dikembangkan (2024+)
- Start server: beberapa detik
- HMR lebih lambat
- Konfigurasi webpack kompleks
- Maintenance mode (tidak aktif)
- Tidak disarankan untuk proyek baru
cd Documents # atau folder manapun yang kamu mau
npm create vite@latest proyek-vue-pertama
Vite akan menanyakan beberapa pertanyaan. Jawab seperti ini untuk pemula:
✔ Select a framework › Vue ✔ Select a variant › JavaScript # Pilih TypeScript kalau sudah siap belajarnya
cd proyek-vue-pertama npm install npm run dev
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
Buka browser, ketik localhost:5173 — dan kamu akan melihat halaman Vue 3 pertamamu! 🎉
Jangan tutup terminal saat dev server sedang berjalan. Kalau mau stop, tekan Ctrl + C di terminal. Kalau kamu tutup terminal langsung, port bisa stuck dan perlu restart.
Setelah proyek terbuat, buka langsung di VS Code dengan mengetik code . di terminal (pastikan kamu sudah di dalam folder proyek). Ini buka VS Code langsung di folder yang tepat — no browsing-browsing!
📁 Kenalan Sebentar: Struktur File Proyek Vite Vue 3
Setelah proyek terbuat, kamu akan melihat banyak file dan folder. Jangan panik! Di artikel selanjutnya kita akan bahas ini lebih dalam, tapi untuk sekarang, ini gambaran singkatnya:
proyek-vue-pertama/ ├── public/ # File statis (favicon, dll) ├── src/ # 🏠 Rumah utama kode kamu │ ├── assets/ # Gambar, CSS global │ ├── components/ # Komponen Vue yang bisa dipakai ulang │ ├── App.vue # Komponen root utama │ └── main.js # Entry point, Vue diinisialisasi di sini ├── index.html # HTML utama ├── package.json # Daftar dependencies proyek └── vite.config.js # Konfigurasi Vite
Seri Belajar Vue: Vue from Zero to Zorro
16 artikel lengkap dari nol sampai mahir — semua yang kamu butuhkan untuk nguasai Vue 3 ada di sini.
📖 Lihat Semua 16 Artikel →Kenalan Dulu Sama Vue 3 — Apa Itu, Kenapa Harus Dipelajari, dan Apa yang Bisa Kamu Buat
→ Baca Artikel SebelumnyaStruktur Proyek Vue 3 — Biar Nggak Bingung Lihat Folder dan File yang Tiba-tiba Muncul
→ Baca Artikel Selanjutnya
No comments:
Post a Comment