โครงสร้างโปรเจกต์ที่สร้างขึ้น
สำรวจไฟล์และโฟลเดอร์ต่าง ๆ ที่โปรเจกต์ Vue สร้างขึ้น
โครงสร้างโปรเจกต์ที่สร้างขึ้น เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 3 บทเรียน
สำรวจโปรเจกต์
โปรเจกต์ Vue ที่สร้างโครงร่างแล้วมีการจัดวางโฟลเดอร์ที่คาดเดาได้
- src/ โค้ดต้นฉบับของแอปพลิเคชัน
- public/ ไฟล์คงที่ที่ให้บริการโดยไม่เปลี่ยนแปลง
- package.json การพึ่งพาและสคริปต์
- index.html หน้าเว็บที่ Vue ใช้เป็นจุด mount
การรู้ว่าแต่ละสิ่งอยู่ที่ใดช่วยให้คุณไปยังส่วนต่าง ๆ ได้อย่างรวดเร็ว
โฟลเดอร์ src
โฟลเดอร์ src/ เก็บทุกสิ่งที่คุณเขียนขึ้น
src/
assets/ # images, fonts, global CSS
components/ # reusable .vue components
App.vue # root component
main.js # application entry pointจุดเริ่มต้น main.js
main.js คือจุดที่แอปเริ่มทำงาน ไฟล์นี้สร้างแอปและใช้ mount เพื่อแสดงแอป
import { createApp } from "vue"
import App from "./App.vue"
import "./assets/main.css"
createApp(App).mount("#app")คอมโพเนนต์ราก App.vue
App.vue คือคอมโพเนนต์ราก คอมโพเนนต์อื่น ๆ ทั้งหมดจะอยู่ภายในคอมโพเนนต์นี้
<template>
<header>
<h1>My App</h1>
</header>
<main>
<HelloWorld msg="Welcome" />
</main>
</template>
<script setup>
import HelloWorld from "./components/HelloWorld.vue"
</script>โฟลเดอร์ components
โฟลเดอร์ components/ เก็บคอมโพเนนต์แบบไฟล์เดียวที่นำกลับมาใช้ใหม่ได้
- ไฟล์ .vue แต่ละไฟล์คือคอมโพเนนต์หนึ่งรายการ
- นำเข้าไฟล์เหล่านี้ในตำแหน่งที่ต้องการใช้
- จัดระเบียบเป็นโฟลเดอร์ย่อยเมื่อแอปมีขนาดใหญ่ขึ้น
โฟลเดอร์ public
โฟลเดอร์ public/ เก็บไฟล์คงที่ที่ถูกคัดลอกไปยังผลลัพธ์การสร้างโดยไม่เปลี่ยนแปลง
- ไฟล์ในโฟลเดอร์นี้จะไม่ผ่านการประมวลผลโดยตัวรวมชุด
- ใช้โฟลเดอร์นี้กับไอคอนเว็บไซต์, robots.txt หรือทรัพยากรคงที่
- อ้างอิงไฟล์เหล่านี้ด้วยเส้นทางสัมบูรณ์จากราก
จุด mount ของ index.html
index.html คือหน้า HTML เพียงหน้าเดียว ซึ่งมีเป้าหมายสำหรับ mount
<!DOCTYPE html>
<html lang="en">
<head>
<title>My App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>package.json
package.json อธิบายโปรเจกต์และการพึ่งพาของโปรเจกต์
{
"name": "my-vue-app",
"version": "0.0.0",
"dependencies": {
"vue": "^3.4.0"
},
"devDependencies": {
"vite": "^5.0.0"
}
}สคริปต์ใน package.json
ส่วน สคริปต์ กำหนดคำสั่งที่คุณเรียกใช้ด้วย npm run
{
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
}
}assets กับ public
มีสองวิธีในการจัดเก็บไฟล์คงที่:
- src/assets/ ผ่านการประมวลผลโดยตัวรวมชุด มีการเติมแฮชเพื่อการแคช และนำเข้าในโค้ด
- public/ ถูกคัดลอกโดยไม่เปลี่ยนแปลง และอ้างอิงด้วยเส้นทางตายตัว
ใช้ assets กับสิ่งที่คุณนำเข้า และใช้ public กับสิ่งที่ต้องคง URL เดิมไว้
การทำงานร่วมกัน
ลำดับการทำงานเมื่อแอปโหลด:
- เบราว์เซอร์โหลด index.html
- เบราว์เซอร์เรียกใช้ main.js ผ่านแท็กสคริปต์โมดูล
- main.js ใช้ mount App.vue เข้าไปใน #app
- App.vue แสดงผลคอมโพเนนต์ลูก
ตรวจสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับโครงสร้างโปรเจกต์
สรุป: โครงสร้างโปรเจกต์
คุณได้สำรวจการจัดวางโปรเจกต์ Vue:
- src/ เก็บโค้ดของคุณ
- main.js เริ่มการทำงานของแอป
- App.vue คือคอมโพเนนต์ราก
- components/ เก็บส่วนประกอบที่นำกลับมาใช้ใหม่ได้
- public/ และ index.html ให้บริการเนื้อหาคงที่
- package.json กำหนดการพึ่งพาและสคริปต์
ถัดไป: กำหนดค่า CLI และเพิ่มปลั๊กอิน
คำถามที่พบบ่อย
บทเรียน “โครงสร้างโปรเจกต์ที่สร้างขึ้น” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “โครงสร้างโปรเจกต์ที่สร้างขึ้น” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 3 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “โครงสร้างโปรเจกต์ที่สร้างขึ้น”
สำรวจไฟล์และโฟลเดอร์ต่าง ๆ ที่โปรเจกต์ Vue สร้างขึ้น คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน
บทเรียน “โครงสร้างโปรเจกต์ที่สร้างขึ้น” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การติดตั้ง Vue CLI
- โครงสร้างโปรเจกต์ที่สร้างขึ้น
- การกำหนดค่า CLI และปลั๊กอิน