วิธีการจัดโครงสร้างโครงการ Vue.js

โครงสร้างโฟลเดอร์ Vue.js ที่สมบูรณ์แบบและสถาปัตยกรรมส่วนประกอบที่มีส่วนประกอบที่ฉลาดและเป็นใบ้

Vue.js เป็นมากกว่า hype เป็นกรอบส่วนหน้าที่ยอดเยี่ยม การเริ่มต้นใช้งานและการสร้างเว็บแอปค่อนข้างง่าย Vue.js มักถูกอธิบายว่าเป็นเฟรมเวิร์กสำหรับแอปขนาดเล็กและบางครั้งก็เป็นทางเลือกแทน jQuery เนื่องจากขนาดเล็ก! ฉันเองคิดว่ามันสามารถเหมาะกับโครงการขนาดใหญ่และในกรณีนี้มันสำคัญที่จะต้องจัดโครงสร้างให้ดีในแง่ของสถาปัตยกรรมส่วนประกอบ

ก่อนที่จะเริ่มโครงการ Vue.js ครั้งแรกของฉันฉันได้ทำการวิจัยบางอย่างเพื่อค้นหาโครงสร้างโฟลเดอร์ที่สมบูรณ์แบบสถาปัตยกรรมส่วนประกอบและการตั้งชื่อแบบแผน ฉันอ่านเอกสาร Vue.js บทความเล็ก ๆ น้อย ๆ และโครงการโอเพนซอร์ส GitHub

ฉันต้องการค้นหาคำตอบของคำถามสองสามข้อที่ฉันมี นั่นคือสิ่งที่คุณจะพบในโพสต์นี้:

  • คุณจัดโครงสร้างไฟล์และโฟลเดอร์ภายในโครงการ Vue.js อย่างไร
  • คุณจะเขียนส่วนประกอบ Smart และ Dumb ได้อย่างไรและคุณวางองค์ประกอบเหล่านั้นไว้ที่ใด เป็นแนวคิดที่มาจาก React
  • ลักษณะการเข้ารหัส Vue.js และแนวทางปฏิบัติที่ดีที่สุดคืออะไร

ฉันจะทำเอกสารกับแหล่งข้อมูลที่ฉันได้รับแรงบันดาลใจจากและลิงก์อื่น ๆ เพื่อทำความเข้าใจให้ดีขึ้น

โครงสร้างโฟลเดอร์ Vue.js

นี่คือเนื้อหาของโฟลเดอร์ src ฉันแนะนำให้คุณเริ่มโครงการด้วย Vue CLI ฉันใช้แม่แบบ Webpack เริ่มต้นเป็นการส่วนตัว

.
├── app.css
├── App.vue
├──สินทรัพย์
│└── ...
ส่วนประกอบ├──
│└── ...
├── main.js
├──มิกซ์อิน
│└── ...
├──เราเตอร์
│└── index.js
ร้านค้า
│├── index.js
โมดูล│├──
││└── ...
utation └── mutation-types.js
├──การแปล
│└── index.js
├── utils
│└── ...
└──มุมมอง
    └── ...

รายละเอียดเล็กน้อยเกี่ยวกับแต่ละโฟลเดอร์เหล่านี้:

  • สินทรัพย์ - ที่ที่คุณวางสินทรัพย์ใด ๆ ที่นำเข้ามาในส่วนประกอบ
  • components - ส่วนประกอบทั้งหมดของโครงการที่ไม่ใช่มุมมองหลัก
  • มิกซ์อิน - มิกซ์อินเป็นส่วนหนึ่งของรหัสจาวาสคริปต์ที่นำกลับมาใช้ในองค์ประกอบที่แตกต่างกัน ในมิกซ์อินคุณสามารถใส่วิธีการของส่วนประกอบใด ๆ จาก Vue.js พวกเขาจะถูกรวมเข้ากับองค์ประกอบที่ใช้งาน
  • เราเตอร์ - เส้นทางทั้งหมดของโครงการของคุณ (ในกรณีของฉันฉันมีไว้ใน index.js) โดยพื้นฐานแล้วทุกอย่างใน Vue.js เป็นองค์ประกอบ แต่ไม่ใช่ทุกอย่างเป็นหน้าเว็บ หน้ามีเส้นทางเช่น "/ แดชบอร์ด", "/ settings" หรือ "/ search" หากองค์ประกอบมีเส้นทางจะถูกกำหนดเส้นทาง
  • store (เป็นทางเลือก) - ค่าคงที่ Vuex ใน mutation-type.js, โมดูล Vuex ในโมดูลโฟลเดอร์ย่อย (ซึ่งจะโหลดใน index.js)
  • การแปล (เป็นทางเลือก) - ไฟล์ตำแหน่งที่ตั้งฉันใช้ Vue-i18n และใช้งานได้ดีทีเดียว
  • utils (เป็นทางเลือก) - ฟังก์ชันที่ฉันใช้ในส่วนประกอบบางอย่างเช่นการทดสอบค่า regex ค่าคงที่หรือตัวกรอง
  • จำนวนการดู - เพื่อทำให้โครงการเร็วขึ้นในการอ่านฉันแยกส่วนประกอบที่กำหนดเส้นทางและวางไว้ในโฟลเดอร์นี้ ส่วนประกอบที่กำหนดเส้นทางให้ฉันนั้นเป็นมากกว่าองค์ประกอบเนื่องจากมันเป็นตัวแทนของหน้าเว็บและมีเส้นทางฉันใส่ไว้ใน“ มุมมอง” จากนั้นเมื่อคุณตรวจสอบหน้าเว็บที่คุณไปที่โฟลเดอร์นี้

ในที่สุดคุณสามารถเพิ่มโฟลเดอร์อื่น ๆ ขึ้นอยู่กับความต้องการของคุณเช่นตัวกรองหรือค่าคงที่ API

แหล่งข้อมูลบางอย่างที่ฉันได้รับแรงบันดาลใจ

  • 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

ส่วนประกอบ Smart vs dumb ที่มี Vue.js

ส่วนประกอบที่ฉลาดและเป็นใบ้เป็นแนวคิดที่ฉันเรียนรู้จาก React ส่วนประกอบสมาร์ทเรียกอีกอย่างว่าภาชนะบรรจุพวกเขาเป็นคนที่จัดการกับการเปลี่ยนแปลงสถานะพวกเขามีความรับผิดชอบในการทำงานของสิ่งต่าง ๆ ในทางตรงกันข้ามส่วนประกอบที่เป็นใบ้นั้นเรียกว่า presentational จัดการกับรูปลักษณ์และความรู้สึกเท่านั้น

หากคุณคุ้นเคยกับรูปแบบ MVC คุณสามารถเปรียบเทียบส่วนประกอบดัมพ์กับมุมมองและส่วนประกอบอัจฉริยะกับคอนโทรลเลอร์!

ใน React smart และ dumb components มักจะใส่ไว้ในโฟลเดอร์ต่าง ๆ ในขณะที่ใน Vue.js คุณใส่ไว้ในโฟลเดอร์เดียวกันนั่นคือ components หากต้องการแยกความแตกต่างใน Vue.js คุณจะต้องใช้หลักการตั้งชื่อ สมมติว่าคุณมีส่วนประกอบการ์ดใบ้คุณควรใช้ชื่อเหล่านี้:

  • BaseCard
  • AppCard
  • วีการ์ด

หากคุณมีส่วนประกอบอัจฉริยะที่ใช้ BaseCard และเพิ่มวิธีการบางอย่างคุณสามารถตั้งชื่อตัวอย่างได้โดยขึ้นอยู่กับโครงการของคุณ:

  • ProfileCard
  • ItemCard
  • NewsCard

หากสมาร์ทการ์ดของคุณไม่ได้เป็นเพียง BaseCard“ Smarter” ที่มีวิธีการใช้ชื่อใดก็ได้ที่เหมาะกับส่วนประกอบของคุณและไม่เริ่มต้นด้วย Base (หรือ App หรือ V) ตัวอย่างเช่น:

  • DashboardStatistics
  • ผลการค้นหา
  • ประวัติผู้ใช้

แบบแผนการตั้งชื่อนี้มาจากแนวทางอย่างเป็นทางการของ Vue.js ที่มีแบบแผนการตั้งชื่อด้วย!

แบบแผนการตั้งชื่อ

ต่อไปนี้คือข้อตกลงบางประการที่มาจากแนวทางอย่างเป็นทางการของ Vue.js ที่คุณต้องการจัดโครงสร้างโครงการของคุณให้ดี:

  • ชื่อส่วนประกอบควรเป็นคำหลายคำยกเว้นสำหรับองค์ประกอบ "แอป" ของรูท ใช้“ UserCard” หรือ“ ProfileCard” แทน“ Card”
  • แต่ละองค์ประกอบควรอยู่ในไฟล์ของตัวเอง
  • ชื่อไฟล์ขององค์ประกอบไฟล์เดียวควรเป็น PascalCase เสมอหรือ kebab-case เสมอ ใช้“ UserCard.vue” หรือ“ user-card.vue”
  • ส่วนประกอบที่ใช้เพียงหนึ่งครั้งต่อหน้าควรเริ่มต้นด้วยคำนำหน้า“ The” เพื่อแสดงว่าสามารถมีได้เพียงหนึ่งรายการเท่านั้น ตัวอย่างเช่นสำหรับ navbar หรือส่วนท้ายคุณควรใช้“ TheNavbar.vue” หรือ“ TheFooter.vue”
  • องค์ประกอบลูกควรมีชื่อผู้ปกครองของพวกเขาเป็นคำนำหน้า ตัวอย่างเช่นหากคุณต้องการส่วนประกอบ“ ภาพถ่าย” ที่ใช้ใน“ UserCard” คุณจะตั้งชื่อมันว่า“ UserCardPhoto” เป็นการอ่านที่ดีกว่าเนื่องจากไฟล์ในโฟลเดอร์มักจะเรียงตามลำดับตัวอักษร
  • ใช้ชื่อเต็มเสมอแทนที่จะใช้ตัวย่อในชื่อส่วนประกอบของคุณ ตัวอย่างเช่นไม่ใช้“ การตั้งค่า UDS” ให้ใช้แทน“ UserDashboardSettings”

Vue.js styleguide อย่างเป็นทางการ

ไม่ว่าคุณจะเป็นมือใหม่หรือมือใหม่กับ Vue.js คุณควรอ่านคู่มือนำเที่ยว Vue.js นี้มันมีเคล็ดลับมากมายและการตั้งชื่อแบบแผน มันมีตัวอย่างมากมายของสิ่งที่ต้องทำและไม่ควรทำ

หากคุณชอบโพสต์นี้กรุณาคลิกปรบมือปุ่มด้านล่างสองสามครั้งเพื่อแสดงการสนับสนุนของคุณ! นอกจากนี้อย่าลังเลที่จะแสดงความคิดเห็นและให้ข้อเสนอแนะใด ๆ อย่าลืมติดตามฉัน!

ต้องการดูบทความเพิ่มเติมเช่นนี้หรือไม่ สนับสนุนฉันใน Patreon