Halo Coders!. Setelah lelet Tak 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 Mempunyai tujuan tersendiri. Mulai dari folder src, Tiba ke node_modules yang Mempunyai 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. Demi Detail Struktur Folder Vue Js Bisa Mitra-Mitra lihat pada gambar dibawah. Disini akan mimin jelaskan yang Krusial-Krusial 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 Begitu kita membangun website.
Misalkan Mitra-Mitra 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 Merukapan icon Demi favicion.ico.
Folder src
Folder Terakhir yang akan kita bahas adalah folder src. Folder ini Bisa dibilang adalah folder yang paling sering kita akses Begitu 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 Eksis index.html di Instalasi Vue Js kita?
Nah, Demi menjawab itu kalian harus Menyaksikan 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 Demi ditampikan pada website kita. Bagaimana Load nya?
Nah Demi me-load data ini adalah tugas dari file kedua yang akan kita lihat Merukapan main.js.
Nah, kalau dilihat disini main.js melakukan import Demi App dari file sebelumnya Merukapan App.vue, Lewat dengan syntax createApp(App).mount('#app') main.js ini memindahkan tampilan yang ditampilkan di App.vue ke index.html Demi ditampilkan pada browser. Apabila dilihat main.js ini melakukan mount dengan #app pada parameter nya. Nah #app ini adalah id yang Eksis di index.html
Demi 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 Tak wajib di inputkan pada Vue Js, akan tetapi biasanya di inputkan Demi 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 Demi memisahkan beberapa bagian dari website ke komponen-komponen kecil. Misalnya Tombol, nah kita Bisa Membangun components Tombol ini satu kali saja, kita simpan kedalam folder components, Lewat kita Bisa menggunakan Tombol ini dimanapun kita mau, tanpa harus Membangun Codingan Tombol Kembali.
Nah Demi Folder assets ini sendiri biasanya di isi oleh beberapa file Demi styling seperti css. Tapi sebenarnya folder ini Bisa menyimpan beberapa hal lain seperti gambar, icon, Tiba video juga.
Hasil
Nah, Bisa kita simpulkan nih temen-temen sebenarnya Struktur Folder Vue Js itu sangat sederhana dan mudah dipahami. Kedepannya kita akan melanjutkan hal ini Demi Membangun sebuah Blog Sederhana.
Demi Mitra-Mitra yang bingung gimana instalasi nya, lihat disini yaa.