0Pricing
Sveltejs Academy · บทเรียน

โครงสร้างโครงการ: src routes static

สำรวจโครงสร้างไดเรกทอรีของโครงการ SvelteKit และจุดประสงค์ของแต่ละโฟลเดอร์

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

โฟลเดอร์ระดับบนสุด

โปรเจกต์ SvelteKit มีโฟลเดอร์สำคัญดังนี้: src/, static/ และไฟล์การตั้งค่าที่ไดเรกทอรีราก

โฟลเดอร์ src

src/ มีโค้ดทั้งหมดของแอป ได้แก่ เส้นทาง คอมโพเนนต์ โค้ดไลบรารี และจุดเริ่มต้นของแอป

โฟลเดอร์ src/routes

แต่ละโฟลเดอร์ย่อยของ src/routes จะจับคู่กับ URL ไฟล์ชื่อ +page.svelte ในโฟลเดอร์จะกำหนดสิ่งที่แสดงผลที่เส้นทางนั้น

ตัวอย่างเส้นทาง

เส้นทาง src/routes/about/+page.svelte จะแสดงผลที่ /about ในเบราว์เซอร์

src/routes/
  +page.svelte         -> /
  about/+page.svelte   -> /about
  blog/[slug]/+page.svelte -> /blog/:slug

โฟลเดอร์ src/lib

src/lib ใช้เก็บโมดูลและคอมโพเนนต์ที่ใช้ร่วมกัน ให้นำเข้าจากโฟลเดอร์นี้โดยใช้นามแฝง $lib

import Button from "$lib/Button.svelte";

โฟลเดอร์ static

ไฟล์ใน static/ จะให้บริการตามเดิมที่รากของ URL ใช้โฟลเดอร์นี้สำหรับ favicon.png, robots.txt และทรัพยากรอื่น ๆ ที่ไม่ผ่านการประมวลผล

ไฟล์การตั้งค่า

ไดเรกทอรีรากมี svelte.config.js, vite.config.js, package.json และอาจมี tsconfig.json ด้วย

svelte.config.js

กำหนดตัวประมวลผลล่วงหน้า อะแดปเตอร์ และตัวเลือกในระดับชุดเครื่องมือ อะแดปเตอร์จะกำหนดวิธีสร้างแอปเพื่อการนำไปใช้งาน

import adapter from "@sveltejs/adapter-auto";
export default { kit: { adapter: adapter() } };

vite.config.js

ใช้ตั้งค่า Vite (ตัวรวมชุดไฟล์เบื้องหลัง) คุณสามารถเพิ่มปลั๊กอิน นามแฝง กฎพร็อกซีของเซิร์ฟเวอร์ และตัวเลือกการสร้างได้ที่นี่

ไฟล์ app.html

src/app.html คือโครง HTML ที่ครอบทุกหน้าไว้ ตัวแทนที่ เช่น %sveltekit.head% จะถูกเติมค่าในระหว่างการสร้าง

ไฟล์ฮุก

src/hooks.server.js ช่วยให้คุณดักรับคำขอบนเซิร์ฟเวอร์ได้ เราจะกล่าวถึงฮุกในหลักสูตรถัดไป

ตรวจสอบความเข้าใจ

ไฟล์เส้นทางของหน้า SvelteKit อยู่ที่ใด

ทบทวน

ตอนนี้คุณทราบโครงสร้างโปรเจกต์แล้ว: src สำหรับโค้ด routes สำหรับหน้า lib สำหรับโค้ดที่ใช้ร่วมกัน และ static สำหรับทรัพยากรดิบ

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

บทเรียน “โครงสร้างโครงการ: src routes static” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “โครงสร้างโครงการ: src routes static”

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

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

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

บทเรียน “โครงสร้างโครงการ: src routes static” ใช้เวลานานแค่ไหน

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

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

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

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

  1. Svelte คืออะไร และเหตุใดจึงคอมไพล์
  2. การสร้างโครงการด้วย npm create svelte
  3. โครงสร้างโครงการ: src routes static
  4. เซิร์ฟเวอร์พัฒนาและการแทนที่โมดูลแบบฉับไว
← กลับไปที่ Sveltejs Academy