หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ส่วนประกอบของบุคคลที่สาม
ดาวน์โหลด

องค์ประกอบทางการตลาดของ bit.dev

ชุดส่วนประกอบ React ที่นำมาใช้ซ้ำได้ซึ่งใช้ในการสร้างเว็บไซต์การตลาด bit.dev พื้นที่เก็บข้อมูลนี้เป็น ไมโครฟรอนท์เอนด์ที่ใช้คอมโพเนนต์ ซึ่งเปิดเผยส่วนประกอบต่างๆ

ภาพหน้าจอ

การรวบรวมส่วนประกอบ - เลือกและใช้งาน

ส่วนประกอบทั้งหมดในโค้ดเบสส่วนหน้านี้ถูกเขียนและเปิดเผยโดยใช้ Bit เป็นชุดของส่วนประกอบที่ใช้งานได้อย่างอิสระ ดู ขอบเขต evangelist บน bit.dev เพื่อสำรวจและรวมส่วนประกอบต่างๆ เข้ากับโปรเจ็กต์ของคุณ

  • ติดตั้งส่วนประกอบอิสระด้วย bbit install
  • ใช้ bbit import เพื่อสำรวจส่วนประกอบในพื้นที่ทำงานในพื้นที่ของคุณและแก้ไขตามความต้องการของคุณ
  • ลองใช้ส่วนประกอบใดๆ ด้วยตนเองในสนามเด็กเล่นสดของเอกสารและในหน้า 'องค์ประกอบ'

ขอบเขต

นี่คือไมโครฟรอนต์เอนด์ตามส่วนประกอบ

เดี๋ยว..อะไรนะ?

แพลตฟอร์มและเว็บไซต์ bit.dev ทั้งหมด ไม่ได้ถูกสร้างขึ้นให้เป็นแอปพลิเคชันขนาดใหญ่เพียงตัวเดียว แต่กลับถูกสร้างขึ้นจาก ส่วนประกอบที่ได้รับการบำรุงรักษาในโค้ดเบสที่แตกต่างกัน ซึ่งมีการพัฒนาแยกกัน จากนั้นจึงเปิดเผยและรวมเข้าด้วยกันโดยใช้ Bit

แสดงให้ฉันดูตัวอย่าง!

ลองดูที่หน้าแรกของ bit.dev

คุณจะสังเกตเห็นว่ามันสร้างจากส่วนประกอบที่อยู่ในโค้ดเบสส่วนหน้าที่แตกต่างกัน:

  • ส่วนประกอบของ evangelist (ที่นี่)
  • ส่วนประกอบ base-ui
  • แอปพลิเคชันคอนเทนเนอร์ (ส่วนตัว)
  • ฯลฯ

เราใช้ Bit เพื่อบรรจุและเปิดเผยส่วนประกอบจากโค้ดเบสใดๆ เป็นชุดของ API ใน bit.dev ที่สามารถรวมเข้ากับเพจและแอปพลิเคชันต่างๆ ได้ ตัวอย่างเช่น:

  • ส่วนประกอบ evangelist ที่ถูกเปิดเผยบน bit.dev
  • เปิดเผยส่วนประกอบ base-ui บน bit.dev

ส่วนประกอบที่สำคัญ

หน้า

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

ส่วนต่างๆ

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

เนื้อหา

ออบเจ็กต์ข้อมูลดิบสำหรับส่วนประกอบภาพ (เช่น โมเดลของ MVC) องค์ประกอบ UI เดียวสามารถใช้องค์ประกอบ เนื้อหา จำนวนมากในที่ต่างๆ และ เนื้อหา อาจถูกนำเสนอแตกต่างกันในองค์ประกอบ UI ที่แตกต่างกัน

อะตอม / 'คอนกรีต'

ส่วนประกอบที่เฉพาะเจาะจงสำหรับหน้าแรกนี้ เนื่องจากองค์ประกอบอะตอมมิก UI ยังคงเป็นนามธรรมและไม่ควรมีข้อความและเนื้อหา

ตั้งค่า

  1. ติดตั้งบิต: npm install @teambit/bit --global
  2. โคลนพื้นที่ทำงาน Bit นี้: git clone https://github.com/teambit/evangelist.git evangelist
  3. ไปที่ไดเร็กทอรีพื้นที่ทำงาน: cd evangelist
  4. ติดตั้งแพ็คเกจทั้งหมดและนำเข้าส่วนประกอบทั้งหมด: bbit install
  5. เรียกใช้ Workspace UI เพื่อสำรวจส่วนประกอบ Evangalist: bbit start และไปที่ https://localhost:3000
  6. สนุก!
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด