Vue.js สนับสนุนการเขียนแบบ Single-File Components (SFC) ในรูปแบบไฟล์ .vue โครงสร้างของไฟล์ .vue ประกอบด้วยส่วนต่างๆ ดังนี้
ตัวอย่างของ Single-File Component:
<template> <div> <h1>{{ message }}</h1> <button @click="changeMessage">Change Message</button> </div> </template> <script> export default { data() { return { message: "Hello, Vue!" }; }, methods: { changeMessage() { this.message = "Hello, Single-File Component!"; } } }; </script> <style scoped> h1 { color: blue; } </style>
การเขียนแบบ Single-File Components ทำให้เราสามารถแยกโครงสร้าง, พฤติกรรม, และสไตล์ของ component ในไฟล์เดียว ทำให้ง่ายต่อการจัดการและรับรู้ถึงโครงสร้างของ component อย่างชัดเจน อย่างไรก็ตาม, เราต้องใช้เครื่องมือเพื่อ compile หรือ bundle ไฟล์ .vue เช่น Vue CLI, Webpack หรือ Rollup เพื่อใช้งานในบริบทของแอพพลิเคชันจริง
ถ้าคุณต้องการ "บิว" หรือ "คอมไพล์" ไฟล์ Vue (Single-File Component) ที่อยู่ใน /home/vue/index.vue, คุณจำเป็นต้องใช้เครื่องมือที่สามารถจัดการและคอมไพล์ไฟล์ .vue อย่าง Vue CLI, Webpack (ด้วย vue-loader) หรือ Vite เป็นต้น
ด้านล่างนี้เป็นขั้นตอนการบิวด้วย Vue CLI:
ติดตั้ง Vue CLI หากยังไม่มี:
npm install -g @vue/cli
สร้างโปรเจคใหม่โดยใช้ Vue CLI (หากยังไม่มีโปรเจค):
vue create my-project
npm run build
หลังจากการบิวเสร็จสิ้น, คุณจะเห็นโฟลเดอร์ dist ภายในโปรเจค ซึ่งเป็นไฟล์ที่ถูกคอมไพล์และพร้อมสำหรับการใช้งานใน production