Kurikulum lengkap dari nol sampai mahir — belajar Vue 3 secara terstruktur, satu artikel setiap langkah.
📖 Lihat Daftar Isi Lengkap →
Pernah nggak, kamu baru selesai install Vue 3 lewat Vite, terus buka folder proyeknya — dan langsung bertanya-tanya: "Ini semua file dari mana? Gue nggak bikin ini semua." Nah, itulah pengalaman hampir semua pemula pertama kali berhadapan dengan struktur proyek Vue 3. Ada node_modules, ada vite.config.js, ada public/, dan entah apalagi. Artikel ini akan membedah satu per satu semua folder Vue 3 dan file yang muncul secara otomatis — biar kamu tahu mana yang boleh diotak-atik dan mana yang sebaiknya tidak disentuh.
Kenapa Struktur Proyek Vue 3 Kelihatan Ribet di Awal?
Bayangkan kamu baru pindah ke kos baru. Kamarnya sudah dilengkapi lemari, meja, cermin, stop kontak, dan bahkan rak buku. Kamu belum taruh apa-apa, tapi fasilitasnya sudah ada semua. Nah, itulah analogi yang tepat untuk proyek Vue 3 yang baru di-generate: bukan kamu yang bikin semuanya, tapi semuanya memang sudah disiapkan biar kamu bisa langsung mulai kerja.
Vite — tools yang dipakai Vue 3 untuk generate proyek — otomatis membuat semua konfigurasi yang kamu butuhkan. Jadi kamu tidak perlu setup dari nol. Tapi karena banyak hal sudah disiapkan, folder dan file-nya pun jadi banyak. Tenang, setelah kita bedah satu per satu, semuanya akan terasa masuk akal.
Struktur proyek Vue 3 adalah susunan folder dan file yang secara otomatis dihasilkan oleh Vite saat kamu membuat proyek baru. Setiap bagian punya fungsi spesifik — dan kamu hanya perlu fokus pada sebagian kecil saja untuk mulai coding.
Dari semua folder dan file yang muncul di proyek Vue 3 baru, kamu sebenarnya hanya akan sering berurusan dengan folder src/ saja untuk hampir 90% pekerjaan sehari-hari. Sisanya adalah konfigurasi yang jarang diubah.
Peta Lengkap Folder Vue 3 — Dibedah Satu Per Satu
Ketika kamu membuka proyek Vue 3 baru di VS Code, kira-kira ini yang akan kamu lihat di sidebar explorer. Mari kita lihat struktur umumnya dulu:
my-vue-app/ ├── 📁 node_modules/ # dependensi (jangan disentuh!) ├── 📁 public/ # file statis (favicon, dll) ├── 📁 src/ # ← zona kerjamu ada di sini! │ ├── 📁 assets/ # gambar, font, css global │ ├── 📁 components/ # komponen Vue yang reusable │ ├── 📄 App.vue # komponen root/induk │ └── 📄 main.js # titik masuk aplikasi ├── 📄 index.html # halaman HTML utama ├── 📄 package.json # metadata & daftar dependensi ├── 📄 package-lock.json # versi pasti semua dependensi └── 📄 vite.config.js # konfigurasi Vite
Sekarang mari kita bahas masing-masing dengan lebih detail. Kita mulai dari yang paling penting sampai yang jarang disentuh.
📁 src/ — Zona Kerja Utama Kamu
Ini adalah jantung dari proyekmu. Hampir semua kode yang kamu tulis akan ada di dalam folder ini. Di sinilah komponen Vue, logika JavaScript, dan style CSS kamu tinggal. Kalau bingung mau naruh file di mana, jawabannya hampir selalu: di dalam src/.
📄 src/App.vue — Komponen Induk
Anggap ini sebagai "badan" dari aplikasimu. Semua komponen lain biasanya dimuat di sini. Ini adalah komponen pertama yang di-render Vue, dan biasanya menjadi "kerangka" tampilan utama aplikasimu.
📄 src/main.js — Titik Masuk Aplikasi
File ini adalah "pintu depan" aplikasimu. Di sinilah Vue diinisialisasi dan komponen App.vue di-mount ke halaman HTML. Biasanya tidak perlu sering diubah, tapi penting untuk dipahami.
📁 src/components/ — Gudang Komponen
Di sinilah kamu menyimpan semua komponen Vue yang reusable — artinya, komponen yang bisa dipakai berulang di halaman yang berbeda. Misalnya tombol, navbar, kartu produk, dan lain-lain. Semakin besar proyek, semakin banyak file .vue yang akan ada di sini.
📁 public/ — File Statis Tanpa Proses
Folder ini berisi file yang akan langsung disajikan apa adanya ke browser — tanpa diproses oleh Vite. Favicon biasanya ada di sini. Beda dengan folder src/assets/ yang file-nya dioptimasi dulu sebelum sampai ke browser.
📁 node_modules/ — Jangan Disentuh!
Folder ini berisi semua library dan dependensi yang diunduh oleh npm. Folder ini bisa sangat besar (ratusan MB), dan kamu tidak perlu pernah mengedit file di dalamnya. Folder ini juga tidak perlu di-upload ke GitHub — biasanya sudah ada di file .gitignore.
Kalau kamu hapus folder node_modules/ secara tidak sengaja, jangan panik. Cukup jalankan npm install di terminal, dan semua dependensi akan diunduh ulang secara otomatis.
Isi File-File Penting dalam Struktur Vue 3
Mengetahui nama folder saja belum cukup. Kamu juga perlu tahu isi dari file-file kunci supaya tidak kaget waktu pertama kali membukanya. Mari kita lihat dua file terpenting.
📄 Isi src/main.js
import { createApp } from 'vue' import App from './App.vue' // Buat aplikasi Vue dari komponen App createApp(App) .mount('#app') // pasang ke elemen #app di index.html
Simpel sekali, bukan? File ini hanya berisi dua tugas: mengimpor komponen App.vue, lalu "memasangnya" ke elemen HTML dengan id #app yang ada di index.html.
📄 Isi src/App.vue
<template> <div> <h1>Halo, Vue 3! 👋</h1> </div> </template> <script setup> // Logika JavaScript ada di sini </script> <style scoped> /* Style CSS hanya berlaku di komponen ini */ </style>
File .vue adalah Single File Component (SFC) — sebuah konsep unik Vue di mana HTML (<template>), JavaScript (<script>), dan CSS (<style>) digabung dalam satu file. Kita bahas lebih dalam di Artikel 4!
Tabel Panduan: Mana yang Perlu Diubah, Mana yang Tidak?
Salah satu kebingungan terbesar pemula adalah: "File ini boleh gue otak-atik nggak?". Tabel berikut memberikan jawabannya dengan jelas.
| File / Folder | Fungsi Utama | Sering Diubah? | Level Risiko |
|---|---|---|---|
src/ |
Zona kerja utama | ✅ | Aman |
src/App.vue |
Komponen induk/root | ✅ | Aman |
src/main.js |
Inisialisasi Vue | 🔄 | Hati-hati |
public/ |
File statis (favicon, dll) | 🔄 | Aman |
package.json |
Metadata & dependensi | 🔄 | Hati-hati |
vite.config.js |
Konfigurasi build tool | ❌ | Jangan dulu |
node_modules/ |
Library hasil npm install | 🚫 | Jangan sentuh! |
Salah satu pertanyaan paling umum pemula: "Gue mau naruh gambar — ke public/ atau src/assets/?"
Gunakan src/assets/ untuk gambar yang diimport langsung di komponen Vue — karena Vite akan mengoptimalkan gambarnya (kompresi, hashing nama file). Lebih aman dan lebih efisien.
Gunakan public/ untuk file yang perlu URL statis yang tetap — misalnya favicon, Open Graph image, atau file yang di-link langsung dari HTML.
Jangan hapus atau ubah nama file index.html yang ada di root proyek. File ini adalah titik masuk yang dibaca oleh browser dan Vite — tanpanya, proyekmu tidak akan bisa dijalankan.
Tips Mengorganisir Folder Vue 3 Saat Proyekmu Berkembang
Struktur default yang dihasilkan Vite sudah bagus untuk proyek kecil. Tapi seiring proyekmu berkembang, kamu akan butuh struktur folder yang lebih terorganisir. Ini adalah pola yang dipakai banyak developer Vue profesional:
src/ ├── 📁 assets/ # gambar, font, style global ├── 📁 components/ # komponen reusable │ ├── 📁 ui/ # tombol, input, modal, dll │ └── 📁 layout/ # header, footer, sidebar ├── 📁 views/ # komponen per halaman │ ├── 📄 HomeView.vue │ └── 📄 AboutView.vue ├── 📁 router/ # konfigurasi Vue Router ├── 📁 stores/ # state management (Pinia) ├── 📁 composables/ # logic yang bisa di-reuse ├── 📄 App.vue └── 📄 main.js
Folder views/ berbeda dengan components/. Views adalah komponen yang mewakili satu halaman penuh (Home, About, Profile), sedangkan components adalah bagian kecil yang dipakai ulang di banyak tempat. Pemisahan ini membuat proyekmu jauh lebih mudah di-navigate ketika sudah besar.
Untuk artikel ini, kamu tidak perlu langsung membuat semua folder itu. Fokus dulu pada src/components/ dan src/App.vue — itu sudah lebih dari cukup untuk seri belajar ini.
Sekarang Kamu Sudah Paham Struktur Proyek Vue 3!
Dari yang tadinya bingung melihat puluhan file asing, sekarang kamu sudah tahu bahwa struktur proyek Vue 3 sebenarnya sangat logis dan terorganisir. Intinya:
- Folder src/ adalah tempat kerja utamamu — hampir semua kode ada di sini.
- App.vue adalah komponen induk, main.js adalah pintu masuk aplikasi.
- Folder node_modules/ adalah wilayah terlarang — jangan disentuh dan jangan di-upload ke Git.
- Semakin besar proyek, semakin penting kamu menambah folder seperti views/, router/, dan stores/.
Di artikel berikutnya (Artikel 4), kita akan masuk lebih dalam ke dalam file .vue — belajar tentang Single File Component, memahami apa itu <template>, <script setup>, dan <style scoped>.
No comments:
Post a Comment