เริ่มต้นกับ 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/: เก็บไฟล์ภาพหรือ CSScomponents/: เก็บ 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 อย่างละเอียด!