Halo Coders!. Setelah lama tidak upload, kali ini mimin mau lanjutin blog-list buat tutorial Vue Js nih. sekarang kita mau bahas soal Struktur Folder Vue Js. Nah setelah di tutorial sebelumnya kita berhasil melakukan instalasi Vue Js, sekarang kita lanjutkan. Semoga bermanfaat :D.
Seperti Framework pada umumnya, Struktur Folder Vue Js terbagi menjadi beberapa bagian yang memiliki tujuan tersendiri. Mulai dari folder src, sampai ke node_modules yang memiliki kegunaan masing-masing. Disini akan kita bahas secara singkat satu-persatu.
Detail Struktur Folder Vue Js
Setelah instalasi Vue Js selesai dilakukan, biasanya beberapa folder akan langsung terbentuk. Untuk Detail Struktur Folder Vue Js bisa teman-teman lihat pada gambar dibawah. Disini akan mimin jelaskan yang penting-penting saja ya 😀
Folder node_modules
Mulai dari folder node_modules. Folder ini adalah folder yang mungkin sering kita temui di beberapa Framework dengan dasar Javascript. node_modules ini adalah Folder yang berisi beberapa Folder Liblary Javascript yang bisa kita manfaatkan saat kita membangun website.
Misalkan teman-teman ingin menambahkan “chart” pada Website temen-temen. Nah temen-temen akan melakukan instalasi Liblary Chart yang kemudian akan disimpan kedalam folder node_modules ini. Keunikan dari node_modules ini sendiri adalah dia akan mengisi Folder nya sesuai dengan Paket yang di install oleh developer yang disimpan pada file package.json
Folder public
Folder ketua yang akan kita bahas adalah Folder public. Folder ini sangatlah sederhana, dia biasanya di isi oleh gambar-gambar atau icon yang akan di akses secara public oleh orang banyak. Secara default Vue Js hanya akan menempatkan satu file saja pada Folder public yaitu icon untuk favicion.ico.
Folder src
Folder Terakhir yang akan kita bahas adalah folder src. Folder ini bisa dibilang adalah folder yang paling sering kita akses saat membangun website kita. Folder src ini berisi hal-hal yang akan ditampilkan pada website yang sedang kita bangun. Bagaimana bisa begitu? bukannya website hanya bisa membaca bahasa HTML saja? Kan ada index.html di Instalasi Vue Js kita?
Nah, untuk menjawab itu kalian harus melihat beberapa file yang terdapat pada folder src ini. Pertama adalah file App.vue
Pada file App.vue berisi syntax seperti HTML walaupun ditambahkan beberapa hal seperti components yang akan kita bahas pada next tutorial. Nah File App.vue ini adalah file yang di Load untuk ditampikan pada website kita. Bagaimana Load nya?
Nah untuk me-load data ini adalah tugas dari file kedua yang akan kita lihat yaitu main.js.
Nah, kalau dilihat disini main.js melakukan import untuk App dari file sebelumnya yaitu App.vue, lalu dengan syntax createApp(App).mount('#app') main.js ini memindahkan tampilan yang ditampilkan di App.vue ke index.html untuk ditampilkan pada browser. Jika dilihat main.js ini melakukan mount dengan #app pada parameter nya. Nah #app ini adalah id yang ada di index.html
Untuk beberapa detail lain nya bisa kalian lihat di dokumentasi Vue Js disini https://vuejs.org/guide/essentials/application.html
Folder components dan assets
Folder yang akan kita bahas pada Struktur Folder Vue Js berikutnya adalah Folder components dan assets. Kedua Folder ini sebenarnya adalah folder tambahan yang tidak wajib di inputkan pada Vue Js, akan tetapi biasanya di inputkan untuk tetap menjaga kerapian dari Struktur Folder Vue Js.
Seperti namanya, folder components biasanya terdiri dari beberapa komponen kecil yang akan ditampilkan pada Website kita. Jadi Framework Vue Js ini memberi kita kemudahan untuk memisahkan beberapa bagian dari website ke komponen-komponen kecil. Misalnya Tombol, nah kita bisa membuat components Tombol ini satu kali saja, kita simpan kedalam folder components, lalu kita bisa menggunakan Tombol ini dimanapun kita mau, tanpa harus membuat Codingan Tombol lagi.
Nah untuk Folder assets ini sendiri biasanya di isi oleh beberapa file untuk styling seperti css. Tapi sebenarnya folder ini bisa menyimpan beberapa hal lain seperti gambar, icon, sampai video juga.
Kesimpulan
Nah, bisa kita simpulkan nih temen-temen sebenarnya Struktur Folder Vue Js itu sangat sederhana dan mudah dipahami. Kedepannya kita akan melanjutkan hal ini untuk membuat sebuah Blog Sederhana.
Untuk teman-teman yang bingung gimana instalasi nya, lihat disini yaa.
