Bagaimana Menghasilkan Projek Vue.js

Struktur folder Vue.js sempurna dan seni bina komponen dengan komponen pintar dan bodoh

Vue.js adalah lebih daripada satu gembar-gembur, ia adalah rangka depan yang besar. Ia agak mudah untuk dimulakan dengannya dan untuk membina aplikasi web. Vue.js sering digambarkan sebagai kerangka untuk aplikasi kecil dan kadang-kadang sebagai alternatif kepada jQuery kerana saiznya yang kecil! Secara peribadi saya fikir ia juga sesuai untuk projek-projek yang lebih besar dan dalam kes ini, penting untuk strukturnya dengan baik, dari segi senibina komponen.

Sebelum memulakan projek Vue.js pertama saya, saya melakukan beberapa penyelidikan untuk mencari struktur folder sempurna, seni bina komponen, dan penamaan konvensyen. Saya melalui dokumentasi Vue.js, beberapa artikel dan banyak projek sumber terbuka GitHub.

Saya perlu mencari jawapan kepada beberapa soalan yang saya ada. Inilah yang anda akan dapati dalam siaran ini:

  • Bagaimanakah anda menyusun fail dan folder dalam projek Vue.js?
  • Bagaimana anda menulis komponen Smart dan Dumb dan di mana anda meletakkannya? Ia adalah konsep yang datang dari React.
  • Apakah gaya coding Vue.js dan amalan terbaik?

Saya juga akan mendokumenkan dengan sumber yang saya terinspirasi oleh dan pautan lain untuk mendapatkan pemahaman yang lebih baik.

Struktur folder Vue.js

Berikut adalah kandungan folder src. Saya cadangkan anda memulakan projek dengan Vue CLI. Saya secara peribadi menggunakan template Webpack lalai.

.
├── app.css
├── App.vue
├── aset
│ └── ...
├── komponen
│ └── ...
├── main.js
├── mixins
│ └── ...
├── penghala
│ └── index.js
├── menyimpan
│ ├── index.js
│ ├── modul
│ │ └── ...
│ └── mutations-types.js
├── terjemahan
│ └── index.js
├── utils
│ └── ...
└── pandangan
    └── ...

Beberapa butiran mengenai setiap folder ini:

  • aset - Di mana anda meletakkan sebarang aset yang diimport ke dalam komponen anda
  • komponen - Semua komponen projek yang bukan pandangan utama
  • mixins - Mixins adalah bahagian kod javascript yang digunakan semula dalam komponen yang berbeza. Dalam campuran anda boleh meletakkan sebarang kaedah komponen dari Vue.js mereka akan digabungkan dengan komponen yang menggunakannya.
  • penghala - Semua laluan projek anda (dalam kes saya, saya mempunyai mereka dalam index.js). Pada dasarnya dalam Vue.js semuanya adalah komponen. Tetapi tidak semuanya adalah halaman. Halaman mempunyai laluan seperti "/ dashboard", "/ settings" atau "/ search". Jika komponen mempunyai laluan, ia dihalakan.
  • simpan (opsional) - Pemalar Vuex dalam mutation-type.js, modul Vuex dalam modul subfolder (yang kemudian dimuatkan dalam indeks.js).
  • terjemahan (pilihan) - Fail locales, saya menggunakan Vue-i18n, dan ia berfungsi dengan baik.
  • utils (optional) - Fungsi yang saya gunakan dalam beberapa komponen, seperti ujian nilai regex, pemalar atau penapis.
  • pandangan -Untuk membuat projek lebih cepat untuk membaca saya memisahkan komponen-komponen yang diarahkan dan meletakkannya dalam folder ini. Komponen yang diarahkan kepada saya adalah lebih daripada komponen kerana ia mewakili halaman dan mereka mempunyai laluan, saya meletakkannya dalam "pandangan" kemudian apabila anda menyemak halaman yang anda pergi ke folder ini.

Anda akhirnya boleh menambah folder lain bergantung pada keperluan anda seperti penapis, atau pemalar, API.

Beberapa sumber yang saya terinspirasi oleh

  • 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 daripada React. Komponen pintar juga dipanggil bekas, mereka adalah orang yang mengendalikan perubahan keadaan, mereka bertanggungjawab untuk bagaimana keadaan berfungsi. Sebaliknya, komponen bodoh, yang juga dipanggil pembentangan, hanya mengendalikan rupa dan rasa.

Jika anda sudah biasa dengan corak MVC, anda boleh membandingkan komponen dump ke komponen Lihat dan pintar ke Pengawal!

Dalam komponen React yang cerdas dan bisu biasanya dimasukkan ke dalam folder yang berbeza sedangkan dalam Vue.js anda meletakkan mereka semua dalam folder yang sama: komponen. Untuk membezakan dalam Vue.js anda akan menggunakan konvensyen penamaan. Katakan anda mempunyai komponen kad bodoh, maka anda harus menggunakan salah satu daripada nama-nama ini:

  • BaseCard
  • AppCard
  • VCard

Sekiranya anda mempunyai komponen pintar yang menggunakan BaseCard dan menambah beberapa kaedah untuknya, anda boleh nyatakan nama itu, bergantung pada projek anda:

  • ProfileCard
  • ItemCard
  • NewsCard

Jika komponen pintar anda bukan hanya BaseCard "Smarter" dengan kaedah, gunakan saja nama yang sesuai dengan komponen anda dan tanpa bermula dengan Base (atau App, atau V), contohnya:

  • DashboardStatistics
  • Keputusan Carian
  • Profil pengguna

Konvensyen penamaan ini berasal dari gaya pengawal rasmi Vue.js yang juga mengandungi konvensyen penamaan!

Menamakan konvensyen

Berikut adalah beberapa konvensyen yang datang dari stylist gaya rasmi Vue.js bahawa anda perlu menyusun dengan baik projek anda:

  • Nama komponen mestilah selalu berbilang kata, kecuali untuk komponen "App" root. Gunakan "UserCard" atau "ProfileCard" dan bukannya "Kad" sebagai contoh.
  • Setiap komponen hendaklah dalam failnya sendiri.
  • Nama fail komponen fail tunggal mestilah sama ada PascalCase atau kebab-kebiasaannya. Gunakan "UserCard.vue" atau "user-card.vue".
  • Komponen yang hanya digunakan sekali setiap halaman harus bermula dengan awalan "The", untuk menunjukkan bahawa hanya ada satu. Sebagai contoh untuk navbar atau footer anda harus menggunakan "TheNavbar.vue" atau "TheFooter.vue".
  • Komponen kanak-kanak perlu memasukkan nama ibu bapa mereka sebagai awalan. Contohnya jika anda ingin komponen "Foto" yang digunakan dalam "UserCard" anda akan namakannya "UserCardPhoto". Ia adalah untuk kebolehbacaan yang lebih baik kerana fail dalam folder biasanya dipasangkan mengikut abjad.
  • Sentiasa gunakan nama penuh dan bukan singkatan dalam nama komponen anda. Contohnya jangan gunakan "UDSettings", gunakan sebaliknya "UserDashboardSettings".

Styleguide rasmi Vue.js

Sama ada anda seorang yang maju atau pemula dengan Vue.js anda harus membaca stylist gaya Vue.js ini, ia mengandungi banyak tip dan juga konvensyen penamaan. Ia mengandungi banyak contoh perkara yang perlu dilakukan dan tidak dilakukan.

Sekiranya anda menyukai siaran ini, sila klik ketik di bawah beberapa kali untuk menunjukkan sokongan anda! Juga, berasa bebas untuk memberi komen dan memberi sebarang maklum balas. Jangan lupa ikut saya!

Ingin melihat lebih banyak artikel seperti ini? Sokongan saya pada Patreon ظ