{"id":1439,"date":"2023-01-13T18:39:00","date_gmt":"2023-01-13T11:39:00","guid":{"rendered":"https:\/\/duniacoding.info\/?p=1439"},"modified":"2023-01-13T18:39:04","modified_gmt":"2023-01-13T11:39:04","slug":"struktur-folder-vue-js","status":"publish","type":"post","link":"https:\/\/duniacoding.id\/blog\/struktur-folder-vue-js\/","title":{"rendered":"Belajar Vue Js #4 : Struktur Folder Vue Js"},"content":{"rendered":"\n
\"struktur-folder-vue-js\"\/<\/figure>\n\n\n\n

Halo Coders!. Setelah lama tidak upload, kali ini mimin mau lanjutin blog-list <\/em>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.<\/p>\n\n\n\n

Seperti Framework pada umumnya, Struktur Folder Vue Js terbagi menjadi beberapa bagian yang memiliki tujuan tersendiri. Mulai dari folder src<\/code>, <\/em>sampai ke node_modules<\/code> <\/em>yang memiliki kegunaan masing-masing. Disini akan kita bahas secara singkat satu-persatu.<\/p>\n\n\n\n

Detail Struktur Folder Vue Js<\/h2>\n\n\n\n

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 \ud83d\ude00<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Folder node_modules<\/em><\/h3>\n\n\n\n

Mulai dari folder node_modules<\/code><\/em>. Folder ini adalah folder yang mungkin sering kita temui di beberapa Framework dengan dasar Javascript<\/code>. node_modules<\/code> <\/em>ini adalah Folder yang berisi beberapa Folder Liblary Javascript <\/code>yang bisa kita manfaatkan saat kita membangun website.<\/p>\n\n\n\n

Misalkan teman-teman ingin menambahkan “chart<\/em>” pada Website temen-temen. Nah temen-temen akan melakukan instalasi Liblary Chart<\/code> <\/em>yang kemudian akan disimpan kedalam folder node_modules<\/code> <\/em>ini. Keunikan dari node_modules<\/code> <\/em>ini sendiri adalah dia akan mengisi Folder nya sesuai dengan Paket yang di install oleh developer yang disimpan pada file package.json<\/code><\/em><\/p>\n\n\n\n

Folder public<\/em><\/h3>\n\n\n\n

Folder ketua yang akan kita bahas adalah Folder public<\/code>. <\/em>Folder ini sangatlah sederhana, dia biasanya di isi oleh gambar-gambar atau icon <\/em>yang akan di akses secara public <\/em>oleh orang banyak. Secara default <\/em>Vue Js hanya akan menempatkan satu file saja pada Folder public<\/code> <\/em>yaitu icon<\/code> <\/em>untuk favicion.ico.<\/p>\n\n\n\n

Folder src<\/em><\/h3>\n\n\n\n

Folder Terakhir yang akan kita bahas adalah folder src. <\/em>Folder ini bisa dibilang adalah folder yang paling sering kita akses saat membangun website kita. Folder src <\/em>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?<\/p>\n\n\n\n

Nah, untuk menjawab itu kalian harus melihat beberapa file <\/em>yang terdapat pada folder src <\/em>ini. Pertama adalah file App.vue<\/code><\/p>\n\n\n\n

\"\"
App.vue pada Vue Js<\/figcaption><\/figure>\n\n\n\n

Pada file App.vue berisi syntax seperti HTML walaupun ditambahkan beberapa hal seperti components <\/em>yang akan kita bahas pada next tutorial. Nah File App.vue ini adalah file yang di Load <\/em>untuk ditampikan pada website kita. Bagaimana Load nya?<\/p>\n\n\n\n

Nah untuk me-load <\/em>data ini adalah tugas dari file kedua yang akan kita lihat yaitu main.js<\/em><\/code>.<\/p>\n\n\n\n

\"\"
file main.js<\/figcaption><\/figure>\n\n\n\n

Nah, kalau dilihat disini main.js <\/em>melakukan import untuk App dari file sebelumnya yaitu App.vue, lalu dengan syntax createApp<\/strong>(App).mount<\/strong>('#app')<\/code> main.js <\/em>ini memindahkan tampilan yang ditampilkan di App.vue ke index.html untuk ditampilkan pada browser. Jika dilihat main.js <\/em>ini melakukan mount <\/em>dengan #app pada parameter nya. Nah #app ini adalah id yang ada di index.html<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Untuk beberapa detail lain nya bisa kalian lihat di dokumentasi Vue Js disini https:\/\/vuejs.org\/guide\/essentials\/application.html<\/a><\/p>\n\n\n\n

Folder components <\/em>dan assets<\/em><\/h3>\n\n\n\n

Folder yang akan kita bahas pada Struktur Folder Vue Js berikutnya adalah Folder components <\/em>dan assets. <\/em>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. <\/p>\n\n\n\n

Seperti namanya, folder components <\/em>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 <\/em>Tombol ini satu kali saja, kita simpan kedalam folder components, <\/em>lalu kita bisa menggunakan Tombol ini dimanapun kita mau, tanpa harus membuat Codingan Tombol lagi.<\/p>\n\n\n\n

Nah untuk Folder assets <\/em>ini sendiri biasanya di isi oleh beberapa file untuk styling <\/em>seperti css. <\/em>Tapi sebenarnya folder ini bisa menyimpan beberapa hal lain seperti gambar, icon, sampai video juga. <\/p>\n\n\n\n

Kesimpulan<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

Untuk teman-teman yang bingung gimana instalasi nya, lihat disini yaa. <\/p>\n\n\n\n

    \n
  1. Belajar Vue Js #3 : Cara Install Vue Js<\/a><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

    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...<\/p>\n","protected":false},"author":2,"featured_media":1279,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[200,190,189],"class_list":["post-1439","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorial","tag-struktur-folder-vue-js","tag-tutorial-vue-js","tag-vue-js"],"_links":{"self":[{"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/posts\/1439","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/comments?post=1439"}],"version-history":[{"count":4,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/posts\/1439\/revisions"}],"predecessor-version":[{"id":1447,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/posts\/1439\/revisions\/1447"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/media\/1279"}],"wp:attachment":[{"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/media?parent=1439"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/categories?post=1439"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/tags?post=1439"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}