Vue Academy · บทเรียน

โครงสร้างโฟลเดอร์ที่รองรับการขยาย

จัดระเบียบโครงการ Vue ขนาดใหญ่ให้ง่ายต่อการบำรุงรักษา

โครงสร้างโฟลเดอร์ที่รองรับการขยาย เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 3 บทเรียน

โครงสร้างมีความสำคัญ

เมื่อแอป Vue มีไฟล์มากกว่าจำนวนเล็กน้อย วิธีจัดระเบียบไฟล์จะเป็นตัวกำหนดว่าการนำทาง การดูแลรักษา และการให้ผู้พัฒนารายใหม่เริ่มงานนั้นง่ายเพียงใด โครงสร้างที่ดีขยายได้ ส่วนโครงสร้างที่วุ่นวายจะทำให้ทุกคนทำงานช้าลง

การจัดระเบียบตามประเภท

แนวทาง จัดตามประเภท จะรวมไฟล์ตามสิ่งที่ไฟล์เหล่านั้นเป็น เช่น รวม component ทั้งหมดไว้ด้วยกัน รวมวิวทั้งหมดไว้ด้วยกัน และรวมที่เก็บสถานะทั้งหมดไว้ด้วยกัน แนวทางนี้เรียบง่ายและเหมาะกับแอปขนาดเล็กถึงขนาดกลาง

src/
  components/
  views/
  stores/
  composables/
  router/

การจัดระเบียบตามฟีเจอร์

แนวทาง จัดตามฟีเจอร์ จะรวมไฟล์ตามฟีเจอร์ที่ไฟล์เหล่านั้นสังกัดอยู่ ทุกอย่างที่เกี่ยวข้องกับฟีเจอร์การยืนยันตัวตนจะอยู่ในโฟลเดอร์เดียว ทำให้แอปขนาดใหญ่ทำความเข้าใจได้ง่ายขึ้น

src/
  features/
    auth/
      LoginView.vue
      useAuth.js
      authStore.js
    cart/
      CartView.vue
      cartStore.js

การเลือกแนวทาง

การจัดตามประเภทเหมาะอย่างยิ่งกับแอปขนาดเล็ก เมื่อแอปเติบโตและมีฟีเจอร์เพิ่มขึ้น การจัดตามฟีเจอร์จะช่วยให้โค้ดที่เกี่ยวข้องกันอยู่รวมกัน และลดการสลับไปมาระหว่างโฟลเดอร์ หลายทีมเริ่มต้นด้วยการจัดตามประเภท แล้วค่อยย้ายไปใช้การจัดตามฟีเจอร์เมื่อขยายระบบ

การแยกวิวและ component

ควรแยก วิว (component ระดับหน้าเว็บที่เชื่อมกับเส้นทาง) ออกจาก component (ชิ้นส่วนพื้นฐานที่นำกลับมาใช้ซ้ำได้) การแยกเช่นนี้ช่วยให้เห็นชัดเจนว่าส่วนใดเชื่อมกับเส้นทาง และส่วนใดเป็นส่วนที่ใช้ร่วมกัน

views/      // routed pages: HomeView.vue, AboutView.vue
components/ // reusable: BaseButton.vue, UserCard.vue

การจัดระเบียบฟังก์ชันประกอบ

เก็บตรรกะของส่วนติดต่อการเขียนโปรแกรมแบบจัดองค์ประกอบที่นำกลับมาใช้ซ้ำได้ไว้ในโฟลเดอร์ composables การตั้งชื่อโดยใช้คำนำหน้า use ช่วยบอกจุดประสงค์ของฟังก์ชันได้ทันที

composables/
  useAuth.js
  useFetch.js
  useLocalStorage.js

การจัดระเบียบที่เก็บสถานะ

วางที่เก็บสถานะส่วนกลางไว้ในโฟลเดอร์ stores โดยแยกหนึ่งไฟล์ต่อหนึ่งขอบเขต วิธีนี้ทำให้ค้นหาการจัดการสถานะได้ง่ายและยังคงแบ่งเป็นส่วนย่อยอย่างเป็นระบบ

stores/
  user.js
  cart.js
  settings.js

หลักการตั้งชื่อ

ความสม่ำเสมอช่วยลดความยุ่งยาก โปรดใช้ PascalCase กับไฟล์ของ component เติมคำนำหน้าด้วย Base สำหรับ component พื้นฐาน และใช้ชื่อหลายคำเพื่อหลีกเลี่ยงการซ้ำกับองค์ประกอบของ HTML

// components
BaseButton.vue
BaseInput.vue
UserProfileCard.vue

// composables
useAuth.js

การส่งออกแบบรวม

จุดรวมการส่งออกคือ index.js ที่ส่งออกเนื้อหาของโฟลเดอร์ซ้ำ ทำให้ผู้ใช้สามารถนำเข้าจากเส้นทางเดียวแทนการนำเข้าจากหลายเส้นทาง

// composables/index.js
export { useAuth } from "./useAuth"
export { useFetch } from "./useFetch"

การนำเข้าจากจุดรวมการส่งออก

เมื่อใช้จุดรวมการส่งออก การนำเข้าหลายรายการจะถูกรวมเป็นบรรทัดเดียวที่เป็นระเบียบ ทำให้อ่านง่ายขึ้น

import { useAuth, useFetch } from "@/composables"

รักษาความสม่ำเสมอ

ไม่ว่าคุณจะเลือกโครงสร้างแบบใด โปรดใช้อย่างสม่ำเสมอและบันทึกไว้ในโครงการ README โครงสร้างที่ดีที่สุดคือโครงสร้างที่ทั้งทีมเข้าใจและปฏิบัติตาม เมื่อแอปเติบโต ควรปรับโครงสร้างไปสู่การจัดตามฟีเจอร์

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทดสอบความรู้เกี่ยวกับโครงสร้างโฟลเดอร์ของคุณ

ทบทวน

จัดระเบียบตาม ประเภท สำหรับแอปขนาดเล็ก และจัดตาม ฟีเจอร์ เมื่อระบบขยายใหญ่ขึ้น แยก วิว ที่เชื่อมกับเส้นทางออกจาก component ที่นำกลับมาใช้ซ้ำได้ เก็บ ฟังก์ชันประกอบ และ ที่เก็บสถานะ ไว้ในโฟลเดอร์ของตนเอง ตั้งชื่อตามหลักการเดียวกัน และใช้ การส่งออกแบบรวม เพื่อให้การนำเข้าเป็นระเบียบ ความสม่ำเสมอที่บันทึกไว้ให้ทีมเข้าใจ คือสิ่งที่ทำให้โครงสร้างขยายได้อย่างแท้จริง

คำถามที่พบบ่อย

บทเรียน “โครงสร้างโฟลเดอร์ที่รองรับการขยาย” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “โครงสร้างโฟลเดอร์ที่รองรับการขยาย” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 3 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “โครงสร้างโฟลเดอร์ที่รองรับการขยาย”

จัดระเบียบโครงการ Vue ขนาดใหญ่ให้ง่ายต่อการบำรุงรักษา คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน

บทเรียน “โครงสร้างโฟลเดอร์ที่รองรับการขยาย” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

มิกซินและคำสั่งกำหนดเอง
การพัฒนาปลั๊กอิน
โครงสร้างโฟลเดอร์ที่รองรับการขยาย

← กลับไปที่ Vue Academy