ฉันเพิ่งใช้บรรทัดคำสั่ง ( CLI) เพื่อเริ่มต้นโครงการ Vue.js CLIสร้างsrc/componentsและsrc/viewsโฟลเดอร์

เป็นเวลาสองสามเดือนแล้วที่ฉันทำงานกับโครงการ Vue และโครงสร้างโฟลเดอร์ดูเหมือนจะใหม่สำหรับฉัน

อะไรคือความแตกต่างระหว่างviewsและcomponentsโฟลเดอร์ในโครงการ Vue ที่สร้างขึ้นด้วยvue-cli?

ก่อนอื่นทั้งสองโฟลเดอร์src/componentsและsrc/viewsมีส่วนประกอบ Vue

ความแตกต่างที่สำคัญคือส่วนประกอบ Vue บางตัวทำหน้าที่เป็นViewsสำหรับการกำหนดเส้นทาง

เมื่อจัดการกับการกำหนดเส้นทางใน Vue โดยปกติจะใช้Vue Routerเส้นทางจะถูกกำหนดเพื่อเปลี่ยนมุมมองปัจจุบันที่ใช้ใน<router-view>คอมโพเนนต์ โดยทั่วไปเส้นทางเหล่านี้จะอยู่ที่src/router/routes.jsซึ่งเราสามารถเห็นสิ่งนี้:

import Home from '@/views/Home.vue'
import About from '@/views/About.vue'

export default [
  {
    path: '/',
    name: 'home',
    component: Home,
  },
  {
    path: '/about',
    name: 'about',
    component: About,
  },
]

ส่วนประกอบที่อยู่ด้านล่างsrc/componentsมีโอกาสน้อยที่จะใช้ในเส้นทางในขณะที่ส่วนประกอบที่อยู่ด้านล่างsrc/viewsจะถูกใช้อย่างน้อยหนึ่งเส้นทาง

Vue CLI มีเป้าหมายที่จะเป็นฐานเครื่องมือมาตรฐานสำหรับระบบนิเวศ Vue ช่วยให้มั่นใจได้ว่าเครื่องมือสร้างต่างๆทำงานได้อย่างราบรื่นพร้อมกับค่าเริ่มต้นที่สมเหตุสมผลเพื่อให้คุณสามารถมุ่งเน้นไปที่การเขียนแอปของคุณแทนที่จะใช้เวลาหลายวันในการทะเลาะกับการกำหนดค่า ในขณะเดียวกันก็ยังมีความยืดหยุ่นในการปรับแต่ง config ของแต่ละเครื่องมือโดยไม่จำเป็นต้องดีดออก

Vue CLI มีจุดมุ่งหมายเพื่อการพัฒนา Vue.js อย่างรวดเร็วทำให้ทุกอย่างเรียบง่ายและมีความยืดหยุ่น เป้าหมายคือเพื่อให้ทีมที่มีระดับความสามารถแตกต่างกันตั้งโครงการใหม่และเริ่มต้นได้

ในตอนท้ายของวันมันเป็นเรื่องของความสะดวกสบายและการประยุกต์ใช้โครงสร้าง

• บางคนชอบที่จะมีของพวกเขาภายใต้มุมมองโฟลเดอร์src/routerเช่น นี้ต้นแบบองค์กร
• บางคนเรียกมันว่าหน้าแทนการเข้าชม
• บางคนมีส่วนประกอบทั้งหมดอยู่ในโฟลเดอร์เดียวกัน

เลือกโครงสร้างแอปพลิเคชันที่เหมาะสมกับโครงการที่คุณกำลังดำเนินการมากที่สุด

ฉันคิดว่ามันเป็นแบบแผนมากกว่า สิ่งที่สามารถนำมาใช้ซ้ำได้สามารถเก็บไว้ในโฟลเดอร์ src / components สิ่งที่เชื่อมโยงกับเราเตอร์สามารถเก็บไว้ใน src / views

โดยทั่วไปแล้วมุมมองที่ใช้ซ้ำได้แนะนำให้วางไว้ในsrc/componentsไดเร็กทอรี ตัวอย่างเช่นส่วนหัวส่วนท้ายโฆษณากริดหรือการควบคุมแบบกำหนดเองเช่นกล่องข้อความหรือปุ่มที่มีสไตล์ สามารถเข้าถึงส่วนประกอบอย่างน้อยหนึ่งรายการได้ภายในมุมมอง

มุมมองสามารถมีองค์ประกอบได้และมุมมองนั้นมีไว้เพื่อให้เข้าถึงได้โดย URL การนำทาง src/viewsพวกเขาจะอยู่โดยทั่วไปใน

จำไว้ว่าคุณไม่มีข้อ จำกัด ในการเข้าถึงส่วนประกอบผ่าน url คุณมีอิสระที่จะเพิ่มส่วนประกอบใด ๆrouter.jsและเข้าถึงได้เช่นกัน แต่ถ้าคุณมีความตั้งใจที่จะทำเช่นนั้นคุณสามารถย้ายไปยังมากกว่าที่วางไว้ในsrc/viewssrc/components

คอมโพเนนต์คือส่วนควบคุมของผู้ใช้ในการเปรียบเทียบกับแบบฟอร์มเว็บ asp.net

เป็นเพียงการกำหนดโครงสร้างโค้ดของคุณเพื่อการบำรุงรักษาและการอ่านที่ดีขึ้น

โดยพื้นฐานแล้วโฟลเดอร์ทั้งสองจะเหมือนกันเนื่องจากทั้งสองมีส่วนประกอบ แต่ความสวยงามของ Vue คือส่วนประกอบที่จะทำหน้าที่เป็นเพจ (กำหนดเส้นทางไปยังเพจสำหรับการนำทาง) จะถูกเก็บไว้ใน/viewsโฟลเดอร์ในขณะที่ส่วนประกอบที่ใช้ซ้ำได้เช่นฟิลด์แบบฟอร์มจะถูกเก็บไว้ใน/componentsโฟลเดอร์ .