เริ่มต้นกับ Vue.js

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

เริ่มต้นกับ 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 อย่างละเอียด!

Office.in.th Custom Service

Want to build or adapt a system from this structure?

Office.in.th designs and develops enterprise web applications, API integrations, and public- and private-sector management systems, with long-term support.

See our software development service