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

สูตรส่วนประกอบเว็บ Lightning


สูตร-โลโก้

ชุดตัวอย่างโค้ดที่เข้าใจง่ายสำหรับ Lightning Web Components แต่ละสูตรจะสาธิตวิธีเขียนโค้ดงานเฉพาะโดยใช้โค้ดน้อยที่สุดที่เป็นไปได้โดยปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุด ลิงก์ "View Source" จะนำคุณไปยังโค้ดบน GitHub โดยตรง ตั้งแต่ "Hello World" ไปจนถึงการเข้าถึงข้อมูลและไลบรารีของบุคคลที่สาม มีสูตรสำเร็จสำหรับสิ่งนั้น!

เรียนรู้เพิ่มเติมเกี่ยวกับแอปนี้โดยดำเนินการเริ่มต้นอย่างรวดเร็ว: สำรวจโครงการ Trailhead ของแอปตัวอย่างสูตรอาหาร LWC หรือโดยการดูวิดีโอการนำเสนอสั้น ๆ นี้

แอปพลิเคชันตัวอย่างนี้ได้รับการออกแบบให้ทำงานบนแพลตฟอร์ม Salesforce หากคุณต้องการสัมผัสประสบการณ์ Lightning Web Components บนแพลตฟอร์มใดๆ โปรดไปที่ https://lwc.dev และลองใช้แอปพลิเคชันตัวอย่าง LWC Recipes OSS ของ Lightning Web Components ของเรา

สารบัญ

  • การติดตั้งแอปโดยใช้ Scratch Org: นี่คือตัวเลือกการติดตั้งที่แนะนำ ใช้ตัวเลือกนี้หากคุณเป็นนักพัฒนาที่ต้องการสัมผัสประสบการณ์แอปและโค้ด

  • การติดตั้งแอปโดยใช้แพ็คเกจแบบปลดล็อค: ตัวเลือกนี้ช่วยให้ทุกคนได้สัมผัสกับแอปตัวอย่างโดยไม่ต้องติดตั้งสภาพแวดล้อมการพัฒนาในเครื่อง

  • การติดตั้งแอปโดยใช้ Developer Edition Org หรือ Trailhead Playground: มีประโยชน์เมื่อจัดการกับ Trailhead Badges หรือหากคุณต้องการให้แอปปรับใช้ในสภาพแวดล้อมที่ถาวรมากกว่า Scratch org

  • คำแนะนำในการติดตั้งเพิ่มเติม

  • รหัสทัวร์

การติดตั้งแอปโดยใช้ Scratch Org

  1. ตั้งค่าสภาพแวดล้อมของคุณ ทำตามขั้นตอนในโครงการ Quick Start: Lightning Web Components Trailhead ขั้นตอนประกอบด้วย:

    • เปิดใช้งาน Dev Hub ใน Trailhead Playground ของคุณ

    • ติดตั้ง Salesforce CLI

    • ติดตั้งโค้ด Visual Studio

    • ติดตั้งส่วนขยาย Visual Studio Code Salesforce รวมถึงส่วนขยาย Lightning Web Components

  2. หากคุณยังไม่ได้ดำเนินการ ให้อนุญาตองค์กรฮับของคุณและระบุนามแฝง ( myhuborg ในคำสั่งด้านล่าง): 

    sf org login web -d -a myhuborg

  3. โคลนที่เก็บ lwc-recipes: 

    git clone https://github.com/trailheadapps/lwc-recipes
cd lwc-recipes

  4. สร้างองค์กรเริ่มต้นและระบุนามแฝง ( lwc-recipes ในคำสั่งด้านล่าง): 

    sf org create scratch -d -f config/project-scratch-def.json -a lwc-recipes

  5. พุชแอปไปที่องค์กรเริ่มต้นของคุณ: 

    sf project deploy start

  6. กำหนดสิทธิ์อนุญาต สูตรอาหาร ให้กับผู้ใช้เริ่มต้น: 

    sf org assign permset -n recipes

  7. นำเข้าข้อมูลตัวอย่าง: 

    sf data tree import -p ./data/data-plan.json

  8. เปิดองค์กรเริ่มต้น: 

    sf org open

  9. ใน การตั้งค่า ภายใต้ ธีมและการสร้างแบรนด์ ให้เปิดใช้งานธีม Recipes Lite หรือ Recipes Blue

  10. ในตัวเรียกใช้งานแอป คลิก ดูทั้งหมด จากนั้นเลือกแอป LWC

การติดตั้งแอพโดยใช้แพ็คเกจปลดล็อค

ปฏิบัติตามคำแนะนำชุดนี้หากคุณต้องการปรับใช้แอปในสภาพแวดล้อมถาวรมากกว่าองค์กร Scratch หรือหากคุณไม่ต้องการติดตั้งเครื่องมือการพัฒนาในเครื่อง คุณสามารถใช้องค์กรที่ไม่ได้ติดตามแหล่งที่มา เช่น Developer Edition Org ฟรีหรือ Trailhead Playground

ตรวจสอบให้แน่ใจว่าได้เริ่มต้นจากสภาพแวดล้อมใหม่เพื่อหลีกเลี่ยงความขัดแย้งกับงานก่อนหน้านี้ที่คุณอาจทำ

  1. เข้าสู่ระบบองค์กรของคุณ

  2. คลิกลิงก์นี้เพื่อติดตั้งแพ็คเกจที่ปลดล็อคสูตรอาหารในองค์กรของคุณ

  3. เลือก ติดตั้งสำหรับผู้ใช้ทั้งหมด

  4. นำเข้าข้อมูลบัญชีและผู้ติดต่อ:

    • คลิกที่นี่เพื่อเข้าถึงไฟล์ Accounts-Contacts.csv คลิกขวาที่หน้าต่างเบราว์เซอร์แล้วบันทึกไฟล์เป็น Accounts-Contacts.csv

    • ใน การตั้งค่า ให้พิมพ์ การนำเข้าข้อมูล ในกล่องค้นหาด่วนแล้วคลิก ตัวช่วยสร้างการนำเข้าข้อมูล

    • คลิก เปิดตัวช่วยสร้าง

    • คลิก บัญชีและผู้ติดต่อ และคลิก เพิ่มบันทึกใหม่

    • ลากไฟล์ Accounts-Contacts.csv ที่คุณเพิ่งบันทึกลงในพื้นที่อัปโหลด

    • คลิก ถัดไป ถัดไป และ เริ่มการนำเข้า

  5. หากคุณกำลังพยายามเริ่มต้นอย่างรวดเร็วบน Trailhead จำเป็นต้องทำขั้นตอนนี้ มิฉะนั้น ให้ข้าม:

    • ไปที่ ตั้งค่า > ผู้ใช้ > ชุดสิทธิ์

    • คลิก สูตรอาหาร

    • คลิก จัดการการมอบหมาย

    • ตรวจสอบผู้ใช้ของคุณแล้วคลิก เพิ่มการมอบหมาย

  6. ใน การตั้งค่า ภายใต้ ธีมและการสร้างแบรนด์ ให้เปิดใช้งานธีม Recipes Lite หรือ Recipes Blue

  7. ในตัวเรียกใช้งานแอป คลิก ดูทั้งหมด จากนั้นเลือกแอป LWC Recipes

การติดตั้งแอปโดยใช้ Developer Edition Org หรือ Trailhead Playground

ปฏิบัติตามคำแนะนำชุดนี้หากคุณต้องการปรับใช้แอปในสภาพแวดล้อมที่ถาวรมากกว่าองค์กร Scratch ซึ่งรวมถึงองค์กรที่ไม่ได้ติดตามแหล่งที่มา เช่น Developer Edition Org ฟรีหรือ Trailhead Playground

ตรวจสอบให้แน่ใจว่าได้เริ่มต้นจากสภาพแวดล้อมใหม่เพื่อหลีกเลี่ยงความขัดแย้งกับงานก่อนหน้านี้ที่คุณอาจทำไปแล้ว

  1. โคลนที่เก็บนี้: 

    git clone https://github.com/trailheadapps/lwc-recipes
cd lwc-recipes

  2. อนุญาตองค์กร Trailhead Playground หรือ Developer ของคุณและระบุนามแฝง ( mydevorg ในคำสั่งด้านล่าง): 

    sf org login web -s -a mydevorg

  3. รันคำสั่งนี้ในเทอร์มินัลเพื่อปรับใช้แอป 

    sf project deploy start -d force-app

  4. กำหนดสิทธิ์อนุญาต recipes ให้กับผู้ใช้เริ่มต้น 

    sf org assign permset -n recipes

  5. นำเข้าข้อมูลตัวอย่างบางส่วน 

    sf data tree import -p ./data/data-plan.json

  6. หากองค์กรของคุณยังไม่เปิด ให้เปิดทันที: 

    sf org open -o mydevorg

  7. ใน การตั้งค่า ภายใต้ ธีมและการสร้างแบรนด์ ให้เปิดใช้งานธีม Recipes Lite หรือ Recipes Blue

  8. ใน App Launcher ให้เลือกแอป LWC

คำแนะนำในการติดตั้งเพิ่มเติม

พื้นที่เก็บข้อมูลนี้ประกอบด้วยไฟล์หลายไฟล์ที่เกี่ยวข้อง หากคุณต้องการรวมเครื่องมือการพัฒนาเว็บสมัยใหม่เข้ากับกระบวนการพัฒนา Salesforce ของคุณ หรือลงในกระบวนการบูรณาการ/ปรับใช้อย่างต่อเนื่องของคุณ

การจัดรูปแบบโค้ด

Prettier คือตัวจัดรูปแบบโค้ดที่ใช้เพื่อให้แน่ใจว่ามีการจัดรูปแบบที่สอดคล้องกันทั่วทั้งฐานโค้ดของคุณ หากต้องการใช้ Prettier กับ Visual Studio Code ให้ติดตั้งส่วนขยายนี้จาก Visual Studio Code Marketplace ไฟล์ .prettierignore และ .prettierrc ถูกจัดเตรียมให้เป็นส่วนหนึ่งของที่เก็บนี้เพื่อควบคุมลักษณะการทำงานของตัวจัดรูปแบบ Prettier

คำเตือน ปลั๊กอิน Apex Prettier เวอร์ชันปัจจุบันกำหนดให้คุณต้องติดตั้ง Java 11 ขึ้นไป

รหัสขุย

ESLint เป็นเครื่องมือ Linting JavaScript ยอดนิยมที่ใช้ในการระบุข้อผิดพลาดด้านโวหารและโครงสร้างที่ผิดพลาด หากต้องการใช้ ESLint กับ Visual Studio Code ให้ติดตั้งส่วนขยายนี้จาก Visual Studio Code Marketplace ไฟล์ .eslintignore ได้รับการจัดเตรียมให้เป็นส่วนหนึ่งของพื้นที่เก็บข้อมูลนี้เพื่อแยกไฟล์บางไฟล์ออกจากกระบวนการ Linting ในบริบทของการพัฒนา Lightning Web Components

เบ็ดตกลงล่วงหน้า

พื้นที่เก็บข้อมูลนี้ยังมาพร้อมกับไฟล์ package.json ที่ทำให้ง่ายต่อการตั้งค่า hook ล่วงหน้าที่บังคับใช้การจัดรูปแบบโค้ดและการ Linting โดยการเรียกใช้ Prettier และ ESLint ทุกครั้งที่คุณ git commit การเปลี่ยนแปลง

วิธีตั้งค่าการจัดรูปแบบและการผูกมัดล่วงหน้าของ Linting:

  1. ติดตั้ง Node.js หากคุณยังไม่ได้ติดตั้ง

  2. เรียกใช้ npm install ในโฟลเดอร์รูทของโปรเจ็กต์ของคุณเพื่อติดตั้งโมดูล ESLint และ Prettier (หมายเหตุ: ผู้ใช้ Mac ควรตรวจสอบว่ามีการติดตั้งเครื่องมือบรรทัดคำสั่ง Xcode ก่อนรันคำสั่งนี้)

Prettier และ ESLint จะทำงานโดยอัตโนมัติทุกครั้งที่คุณทำการเปลี่ยนแปลง การดำเนินการจะล้มเหลวหากตรวจพบข้อผิดพลาดในการเป็นขุย คุณยังสามารถเรียกใช้การจัดรูปแบบและ Linting จากบรรทัดคำสั่งโดยใช้คำสั่งต่อไปนี้ (ตรวจสอบ package.json สำหรับรายการทั้งหมด): 

npm run lint
npm run prettier

รหัสทัวร์

Code Tours เป็นคำแนะนำแบบทีละขั้นตอนซึ่งจะช่วยให้คุณเข้าใจโค้ดของแอปได้ดีขึ้น เพื่อให้สามารถรันได้ ให้ติดตั้งส่วนขยาย CodeTour VSCode

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด