Tutorial Vue [Part 3] - Memahami Struktur Folder Vue

 Setelah berhasil melakukan installasi vue, hal selanjutnya yang harus kita pahami adalah struktur folder pada vue. 

jika kita buka project vue-project kita akan menemukan 3 folder utama yaitu

a. node_modules

Folder ini berisi inti framework dari vue js

b. public

Sama halnya dengan laravel, kita akan memasukkan file yang akan diembed kedalam project semisal gambar, style, bootstrap kedalam folder ini

Pada folder ini pun kita bisa menemukan file index.html, dimana file inilah yang pertama kali akan di load oleh server ketika kita mengakses url saat kita menjalankan perintah npm run serve

jika kita buka file index.html maka kita akan melihat struktur seperti ini

terdapat script <div id="app> seperti halnya javascript lain, maka id ini lah yang sebetulnya akan di inject oleh vue dalam menampilkan data.

c. src

Folder ini berisi project yang akan kita buat. Secara default folder ini akan berisi folder assets, folder components, App.vue, dan main.js.

# main.js jika kita buka akan berisi script berikut

disini kita dapat melihat bahwa main.js akan melakukan inject data ke index.html yang berisi id app, sesuai dengan perintah

createApp(App).mount('#app')

# App.vue merupakan file utama yang akan direload

Silahkan hapus file HelloWorld.vue kareana kita tidak membutuhkannya.

dan ubah file App.vue menjadi

<template>

</template>

<script>

export default {
  name: 'App',

}
</script>

<style>

</style>

Ini merupakan script dasar dalam menggunakan vue.

pada bagian <template></template> disini kita bisa menambahkan script html, misalnya coba kita ubah dengan script berikut

<template>
 <h3>Hello dunia, ini adalah script vue pertama aku</h3>
</template>

<script>

export default {
  name: 'App',

}
</script>

<style>

</style>

maka akan tampil di web kita sebagai berikut

>>next lanjut part 4