Aesthetic study notes about Hello World with Vue 3 from CDN to Vite on an iPad screen

1. 🎯 ตอนที่ 4: ก้าวแรกสู่โลกของ Vue จากความเรียบง่ายสู่สถาปัตยกรรมระดับ Enterprise

2. 📖 เปิดฉาก (The Hook)

จำสมัยที่เราทำเว็บยุคก่อนได้ไหมครับ? เวลาอยากให้ปุ่มมันคลิกแล้วมีอะไรเด้งขึ้นมา เราก็แค่แปะแท็ก <script> ของ jQuery ไว้ใน <head> แล้วก็เริ่มเขียนโค้ดต่อกันยาวเหยียดในไฟล์ HTML ไฟล์เดียวจบ ช่วงแรกมันก็สนุกดีหรอกครับ แต่พอโปรเจกต์เริ่มใหญ่ขึ้น โค้ด HTML, CSS และ JavaScript มันพันกันมั่วตั้วเป็นสปาเกตตี แถมหาบั๊กทีก็ตาเหลือก!

พอเข้าสู่ยุค Modern Web Development เราจึงต้องการ “โครงสร้าง” ที่ดีกว่าเดิม Vue.js เข้าใจปัญหานี้ดีครับ มันถูกออกแบบมาให้เป็น “Progressive Framework” หมายความว่าคุณจะเริ่มแบบมักง่ายสไตล์ยุคเก่าด้วยการแปะลิงก์ CDN ก็ได้ หรือจะขึ้นโครงโปรเจกต์แบบสถาปนิกมืออาชีพด้วยเครื่องมืออย่าง Vite ก็ได้เช่นกัน

วันนี้พี่จะพามาดูความแตกต่างของการเริ่มต้น “Hello World” ทั้งสองแบบ ว่าแบบไหนเหมาะกับสถานการณ์อะไร และสถาปัตยกรรมมาตรฐานของ Vue 3 ที่แท้จริงหน้าตาเป็นอย่างไร จิบกาแฟให้พร้อมแล้วลุยกันเลย!

3. 🧠 แก่นวิชา (Core Concepts)

ก่อนจะลงมือโค้ด เรามาทำความเข้าใจ 2 เส้นทางหลักในการอัญเชิญ Vue.js มาประทับร่างในโปรเจกต์ของเรากันก่อนครับ

เส้นทางที่ 1: สายคลาสสิกผ่าน CDN (Content Delivery Network)

นี่คือวิธีที่ง่ายและเร็วที่สุดครับ ไม่ต้องติดตั้งโปรแกรมอะไรเพิ่ม แค่แทรกแท็ก <script> ดึงไฟล์ Vue.js จากอินเทอร์เน็ต (เช่น unpkg หรือ cdnjs) ลงในไฟล์ HTML ของคุณ

  • 👍 ข้อดี: ง่ายสุดๆ ไม่ต้องมี Build step (ขั้นตอนการแปลงโค้ด) เหมาะสำหรับการทำ Prototype เร็วๆ, การเรียนรู้พื้นฐาน, หรือการนำ Vue ไปใช้เพิ่มความสามารถให้กับเว็บเดิมที่มีอยู่แล้ว (Progressive enhancement) อย่างพวกเว็บ WordPress
  • 👎 ข้อเสีย: คุณจะ ไม่สามารถใช้ ฟีเจอร์สุดเจ๋งอย่าง Single-File Component (SFC) หรือไฟล์นามสกุล .vue ได้ โค้ดจะเริ่มดูแลยากเมื่อแอปพลิเคชันซับซ้อนขึ้น และไม่ได้รับการรีดประสิทธิภาพการทำงาน (Optimization) ในระดับสูงสุดก่อนขึ้น Production

เส้นทางที่ 2: สายสถาปนิกด้วย Build Tools (Vite)

หากคุณต้องการสร้าง Single-Page Application (SPA) ที่จริงจัง หรือแอปพลิเคชันระดับองค์กร คุณต้องพึ่งพา Build Tool ในอดีตเราใช้ Vue CLI (ซึ่งอยู่บนฐานของ Webpack) แต่ปัจจุบัน Vue CLI เข้าสู่โหมดซ่อมบำรุงแล้ว พระเอกตัวจริงในยุค Vue 3 คือ Vite (อ่านว่า วีท)

  • 👍 ข้อดี: รองรับ Single-File Components (SFCs) เต็มรูปแบบ ซึ่งเป็นการรวม HTML (Template), JS (Script), และ CSS (Style) ไว้ในไฟล์เดียวอย่างเป็นระเบียบ รองรับ TypeScript, มี Hot Module Replacement (HMR) ที่รีเฟรชหน้าจอเร็วปานสายฟ้า และสามารถทำ Code Splitting รวมถึงการทำ Tree-shaking (เขย่าโค้ดที่ไม่ได้ใช้ออก) เพื่อให้ไฟล์เบาที่สุด
  • 👎 ข้อเสีย: ต้องมีความรู้เรื่อง Command Line (Terminal), Node.js และ npm เล็กน้อย
Diagram showing the evolution of Vue.js project setup

4. 💻 ร่ายมนต์โค้ด (Show me the Code)

แบบที่ 1: Hello World ฉบับ CDN (ลองรันในไฟล์ HTML ธรรมดา) 

<!DOCTYPE html>
<html>
<head>
  <title>Hello Vue 3 CDN</title>
  <!-- อัญเชิญ Vue 3 จาก CDN -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <!-- จุดที่ Vue จะเข้ามาควบคุม (Mounting Point) -->
  <div id="app">
    <h1>{{ message }}</h1>
  </div>

  <script>
    // สกัดฟังก์ชัน createApp ออกมาจาก Global Vue Object
    const { createApp } = Vue;
    
    // สร้างแอปพลิเคชัน
    createApp({
      data() {
        return {
          message: 'Hello World ฉบับ CDN!' // Reactive Data
        }
      }
    }).mount('#app'); // สั่งให้สิงร่างที่ div id="app"
  </script>
</body>
</html>

แบบที่ 2: สร้างโปรเจกต์มาตรฐานด้วย Vite

เปิด Terminal ขึ้นมา (ต้องลง Node.js ก่อนนะ) แล้วร่ายคำสั่งนี้:

# 1. สั่งสร้างโปรเจกต์ Vue ด้วย Vite
npm create vue@latest

# ระบบจะถามการตั้งค่าต่างๆ (ตอบ No ไปก่อนสำหรับโปรเจกต์พื้นฐาน หรือ Yes ถ้าอยากได้ TypeScript/Router/Pinia)
# สมมติเราตั้งชื่อโปรเจกต์ว่า "my-first-app"

# 2. เดินเข้าไปในโฟลเดอร์โปรเจกต์
cd my-first-app

# 3. ติดตั้งไลบรารีและเครื่องมือที่จำเป็น (รอดาวน์โหลดแป๊บเดียว)
npm install

# 4. สตาร์ทเครื่องยนต์ จำลองเซิร์ฟเวอร์!
npm run dev

พอรันเสร็จ คุณจะได้ URL (เช่น http://localhost:5173) เอาไปเปิดในเบราว์เซอร์ก็จะเจอหน้าจอสวยๆ ของ Vue 3 พร้อมทำงานแล้วครับ!

5. 🛡️ เคล็ดลับจากคัมภีร์ลับ (Under the Hood / Pro-Tips)

เมื่อเปิดโปรเจกต์ Vite ที่เพิ่งสร้างขึ้นมาใน VS Code คุณจะเจอโครงสร้างไฟล์มากมาย มือใหม่อาจจะตกใจว่า “อะไรกันเนี่ย!” พี่สรุปแผนผังบ้านหลังนี้ให้ฟังง่ายๆ ครับ:

  • 🚪 index.html: นี่คือ “ประตูบ้าน” ครับ ไฟล์นี้เป็นไฟล์แรกที่เบราว์เซอร์เรียกหา สังเกตว่าจะมี <div id="app"></div> ซ่อนอยู่ และมีคำสั่งเรียกไฟล์ JavaScript เข้ามาทำงาน
  • 📜 package.json: “พิมพ์เขียวและรายการวัสดุก่อสร้าง” เก็บบัญชีรายชื่อไลบรารีที่เราใช้ (Dependencies) รวมถึงคำสั่งลัดอย่าง npm run dev หรือ npm run build
  • 📦 node_modules/: “โกดังเก็บวัสดุ” ไฟล์ไลบรารีทั้งหมดที่เราโหลดผ่าน npm install จะมากองรวมกันที่นี่ (โฟลเดอร์นี้ใหญ่มาก ห้ามเอาเข้า Git เด็ดขาด!)
  • 🎨 public/: “ตู้โชว์กระจกใส” ใช้เก็บไฟล์ Static อย่างรูปภาพ โลโก้ หรือ favicon ไฟล์ในนี้จะไม่ถูก Vite นำไปประมวลผล (ยุ่งเกี่ยว) ใดๆ ทั้งสิ้น
  • 🛠️ src/ (โฟลเดอร์นี้สำคัญสุด!): นี่คือ “ห้องทำงาน” ของคุณ โค้ดที่คุณเขียนทั้งหมดจะอยู่ในนี้
    • src/main.js (หรือ .ts): เป็น “หัวหน้าคนงาน” (Entry point) มีหน้าที่ดึงเอา Vue มาสร้าง Application Instance (createApp) และสั่งให้ไปผูกตัว (mount) กับ <div id="app"> ใน index.html
    • src/App.vue: เป็น “เสาเอก” ของบ้าน หรือ Root Component เป็นไฟล์ Single-File Component ตัวแรกสุดที่จะแตกกิ่งก้านสาขาไปหา Component ย่อยๆ ตัวอื่น
    • src/components/: “ห้องเก็บชิ้นส่วน” เรามักจะแบ่งหน้าตา UI ออกเป็นชิ้นเล็กๆ (เช่น ปุ่ม, การ์ด, แถบเมนู) เป็นไฟล์ .vue แล้วเก็บรวมกันไว้ในนี้ เพื่อนำไปประกอบร่างกันภายหลัง

6. 🏁 บทสรุป (To be continued…)

จะเห็นได้ว่า การเริ่มเขียน Vue 3 นั้นมีความยืดหยุ่นสูงมาก การใช้ CDN ก็เปรียบเสมือนการกางเต็นท์นอนริมน้ำ ทำได้ไวและง่าย แต่ถ้าคุณต้องการสร้างบ้านที่มั่นคงแข็งแรงรองรับคนจำนวนมาก การเริ่มต้นด้วย Vite และทำความเข้าใจโครงสร้างไฟล์มาตรฐาน คือรากฐานที่สำคัญที่สุดครับ

ในบทต่อไป เราจะเจาะลึกเข้าไปในห้องทำงาน src/ เพื่อชำแหละกายวิภาคของสิ่งประดิษฐ์ที่เรียกว่า “Single-File Component” กันว่าข้างใน .vue หนึ่งไฟล์ มันซ่อนเวทมนตร์อะไรไว้บ้าง!

ต้องการที่ปรึกษาและพัฒนาระบบ Web Application หรือ Frontend Architecture ให้กับธุรกิจของคุณ? ทีมงาน WP Solution พร้อมให้บริการออกแบบและพัฒนาซอฟต์แวร์แบบครบวงจร ดูรายละเอียดบริการของเราได้ที่: www.wpsolution2017.com หรือพูดคุยปรึกษาเบื้องต้นได้ที่ Line: wisit.p