Cara Menyusun Proyek Vue.js

Struktur folder Vue.js yang sempurna dan arsitektur komponen dengan komponen yang pintar dan bodoh

Vue.js lebih dari sekadar hype, ini adalah kerangka kerja frontend yang bagus. Sangat mudah untuk memulai dan membangun aplikasi web. Vue.js sering digambarkan sebagai kerangka kerja untuk aplikasi kecil dan bahkan kadang-kadang sebagai alternatif untuk jQuery karena ukurannya yang kecil! Saya pribadi berpikir bahwa itu juga cocok untuk proyek yang lebih besar dan dalam hal ini, penting untuk menyusunnya dengan baik, dalam hal arsitektur komponen.

Sebelum memulai proyek Vue.js besar pertama saya, saya melakukan riset untuk menemukan struktur folder yang sempurna, arsitektur komponen, dan konvensi penamaan. Saya membaca dokumentasi Vue.js, beberapa artikel, dan banyak proyek open source GitHub.

Saya perlu menemukan jawaban untuk beberapa pertanyaan yang saya miliki. Itulah yang akan Anda temukan di pos ini:

  • Bagaimana Anda menyusun file dan folder di dalam proyek Vue.js?
  • Bagaimana Anda menulis komponen Smart and Dumb dan di mana Anda meletakkannya? Ini adalah konsep yang berasal dari React.
  • Apa gaya pengkodean dan praktik terbaik Vue.js?

Saya juga akan mendokumentasikan dengan sumber yang saya dapatkan dari inspirasi dan tautan lain untuk mendapatkan pemahaman yang lebih baik.

Struktur folder Vue.js

Ini adalah isi folder src. Saya merekomendasikan Anda untuk memulai proyek dengan Vue CLI. Saya pribadi menggunakan templat Webpack default.

.
├── app.css
├── App.vue
├── aset
│ └── ...
├── komponen
│ └── ...
├── main.js
├── mixins
│ └── ...
├── router
│ └── index.js
├── toko
│ ├── index.js
│ ├── modul
│ │ └── ...
│ └── mutation-types.js
├── terjemahan
│ └── index.js
├── utils
│ └── ...
└── pandangan
    └── ...

Beberapa detail tentang masing-masing folder ini:

  • aset - Di mana Anda memasukkan aset apa pun yang diimpor ke komponen Anda
  • komponen - Semua komponen proyek yang bukan merupakan pandangan utama
  • mixins - Mixins adalah bagian dari kode javascript yang digunakan kembali dalam komponen yang berbeda. Dalam mixin Anda dapat menempatkan metode komponen apa pun dari Vue.js mereka akan digabungkan dengan yang komponen yang menggunakannya.
  • router - Semua rute proyek Anda (dalam kasus saya, saya memilikinya di index.js). Pada dasarnya di Vue.js semuanya adalah komponen. Tapi tidak semuanya halaman. Halaman memiliki rute seperti "/ dasbor", "/ pengaturan" atau "/ pencarian". Jika komponen memiliki rute, rute dialihkan.
  • store (opsional) - Konstanta Vuex dalam mutation-type.js, modul Vuex dalam modul subfolder (yang kemudian dimuat dalam index.js).
  • terjemahan (opsional) - File Locales, saya menggunakan Vue-i18n, dan berfungsi cukup baik.
  • utils (opsional) - Fungsi yang saya gunakan di beberapa komponen, seperti pengujian nilai regex, konstanta atau filter.
  • views —Untuk membuat proyek lebih cepat dibaca, saya memisahkan komponen-komponen yang diarahkan dan meletakkannya di folder ini. Komponen yang dirutekan untuk saya lebih dari komponen karena mereka mewakili halaman dan mereka memiliki rute, saya menempatkannya dalam "tampilan" maka ketika Anda memeriksa halaman Anda pergi ke folder ini.

Anda akhirnya dapat menambahkan folder lain tergantung pada kebutuhan Anda seperti filter, atau konstanta, API.

Beberapa sumber daya yang saya terinspirasi

  • https://vuex.vuejs.org/en/structure.html
  • https://github.com/vuejs/vue-hackernews-2.0/tree/master/src
  • https://github.com/mchandleraz/realworld-vue/tree/master/src

Komponen pintar vs bodoh dengan Vue.js

Komponen pintar dan bodoh adalah konsep yang saya pelajari dari React. Komponen pintar juga disebut wadah, merekalah yang menangani perubahan status, mereka bertanggung jawab atas cara kerja berbagai hal. Sebaliknya, komponen bodoh, juga disebut presentasional, hanya menangani tampilan dan nuansa.

Jika Anda terbiasa dengan pola MVC, Anda dapat membandingkan komponen dump ke View dan komponen pintar ke Controller!

Dalam Bereaksi komponen pintar dan bodoh biasanya diletakkan di folder yang berbeda sedangkan di Vue.js Anda meletakkannya semua di folder yang sama: komponen. Untuk membedakan di Vue.js Anda akan menggunakan konvensi penamaan. Katakanlah Anda memiliki komponen kartu bodoh, maka Anda harus menggunakan salah satu dari nama-nama ini:

  • BaseCard
  • AppCard
  • VCard

Jika Anda memiliki komponen pintar yang menggunakan BaseCard dan menambahkan beberapa metode untuk itu, Anda bisa misalnya menamainya, tergantung pada proyek Anda:

  • Kartu Profil
  • ItemCard
  • Kartu Berita

Jika komponen cerdas Anda bukan hanya BaseCard "Lebih Cerdas" dengan metode, cukup gunakan nama apa pun yang cocok dengan komponen Anda dan tanpa memulai dengan Base (atau Aplikasi, atau V), misalnya:

  • DashboardStatistics
  • Hasil Pencarian
  • Profil pengguna

Konvensi penamaan ini berasal dari styleguide resmi Vue.js yang juga berisi konvensi penamaan!

Konvensi penamaan

Berikut adalah beberapa konvensi yang datang dari styleguide resmi Vue.js yang Anda butuhkan untuk menyusun proyek Anda dengan baik:

  • Nama komponen harus selalu multi-kata, kecuali untuk komponen "Aplikasi" root. Sebagai contoh, gunakan "UserCard" atau "ProfileCard" daripada "Card".
  • Setiap komponen harus dalam file sendiri.
  • Nama file komponen file tunggal harus selalu PascalCase atau selalu kebab-case. Gunakan "UserCard.vue" atau "user-card.vue".
  • Komponen yang hanya digunakan satu kali per halaman harus dimulai dengan awalan "The", untuk menyatakan bahwa hanya ada satu. Misalnya untuk navbar atau catatan kaki Anda harus menggunakan "TheNavbar.vue" atau "TheFooter.vue".
  • Komponen anak harus menyertakan nama induknya sebagai awalan. Misalnya jika Anda ingin komponen "Foto" yang digunakan dalam "UserCard" Anda akan menamainya "UserCardPhoto". Ini agar lebih mudah dibaca karena file dalam folder biasanya dipesan berdasarkan abjad.
  • Selalu gunakan nama lengkap dan bukan singkatan atas nama komponen Anda. Misalnya jangan gunakan "UDSettings", gunakan "UserDashboardSettings".

Pemandu gaya resmi Vue.js

Apakah Anda seorang pemula atau pemula dengan Vue.js Anda harus membaca panduan gaya Vue.js ini, itu berisi banyak tips dan juga konvensi penamaan. Ini berisi banyak contoh hal yang harus dilakukan dan tidak boleh dilakukan.

Jika Anda menyukai posting ini, silakan klik tombol bertepuk di bawah beberapa kali untuk menunjukkan dukungan Anda! Juga, jangan ragu untuk berkomentar dan memberikan umpan balik apa pun. Jangan lupa ikuti saya!

Ingin melihat lebih banyak artikel seperti ini? Dukung saya di Patreon