บทที่ 1: เริ่มต้นกับ Vue.js

1. Vue.js คืออะไร?

Vue.js เป็นเฟรมเวิร์ค JavaScript แบบโอเพ่นซอร์สที่ใช้สำหรับการพัฒนา User Interface (UI) และ Single Page Application (SPA) ได้รับความนิยมเนื่องจากง่ายต่อการใช้งาน มีขนาดเล็ก และมีประสิทธิภาพสูง

จุดเด่นของ Vue.js:

ง่ายต่อการเริ่มต้น: Syntax ที่เข้าใจง่ายเหมาะสำหรับทั้งมือใหม่และผู้เชี่ยวชาญ
Component-Based: ช่วยให้การพัฒนาและจัดการโค้ดง่ายขึ้น
Reactivity System: ระบบตอบสนองการเปลี่ยนแปลงของข้อมูลที่รวดเร็วและทันที

2. การติดตั้ง Vue.js

วิธีที่ 1: ใช้ CDN (เหมาะสำหรับการเริ่มต้นเรียนรู้)

คุณสามารถใช้ Vue.js ผ่าน Content Delivery Network (CDN) โดยเพิ่มโค้ดนี้ในไฟล์ HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue.js Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">{{ message }}</div>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          message: 'Hello Vue!'
        }
      }
    });
    app.mount('#app');
  </script>
</body>
</html>

วิธีที่ 2: ติดตั้งด้วย Vue CLI (สำหรับโปรเจกต์จริง)

ติดตั้ง Node.js และ npm (หากยังไม่มี):

ดาวน์โหลดและติดตั้งจาก Node.js Official Website

ติดตั้ง Vue CLI:

   npm install -g @vue/cli

สร้างโปรเจกต์ใหม่:

   vue create my-vue-app

เข้าไปที่โฟลเดอร์โปรเจกต์และเริ่มเซิร์ฟเวอร์:

   cd my-vue-app
   npm run serve

เปิดเบราว์เซอร์และเข้าที่ http://localhost:8080 เพื่อดูผลลัพธ์

3. โครงสร้างโปรเจกต์ Vue.js

หลังจากสร้างโปรเจกต์ด้วย Vue CLI คุณจะพบโครงสร้างไฟล์ดังนี้:

my-vue-app
├── public
├── src
│   ├── assets
│   ├── components
│   ├── App.vue
│   └── main.js
├── package.json
└── node_modules

คำอธิบาย:

public/: เก็บไฟล์ที่ไม่ต้องการผ่าน Webpack เช่น ไฟล์ HTML และรูปภาพ
src/: โฟลเดอร์หลักสำหรับการพัฒนา
assets/: เก็บไฟล์ภาพหรือ CSS
components/: เก็บ Component ที่สร้างขึ้น
App.vue: Component หลักของโปรเจกต์
main.js: ไฟล์เริ่มต้นของแอปพลิเคชัน

4. Hello World ด้วย Vue.js

มาลองสร้าง “Hello World” Application ง่ายๆ:

เปิดไฟล์ App.vue ในโฟลเดอร์ src
แก้ไขโค้ดเป็นดังนี้:

<template>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue World!'
    };
  }
};
</script>

<style>
#app {
  font-family: Arial, sans-serif;
  text-align: center;
  margin-top: 50px;
}
</style>

บันทึกและดูผลลัพธ์ในเบราว์เซอร์

5. สรุป

ในบทนี้ คุณได้เรียนรู้:

พื้นฐานของ Vue.js และจุดเด่น
วิธีติดตั้ง Vue.js ทั้งแบบ CDN และ Vue CLI
โครงสร้างโปรเจกต์ที่สร้างโดย Vue CLI
การสร้าง “Hello World” Application

ในบทต่อไป เราจะเรียนรู้เกี่ยวกับโครงสร้างและการสร้าง Component ใน Vue.js อย่างละเอียด!