Single-File Components (SFC) VUE.js

Vue.js สนับสนุนการเขียนแบบ Single-File Components (SFC) ในรูปแบบไฟล์ .vue โครงสร้างของไฟล์ .vue ประกอบด้วยส่วนต่างๆ ดังนี้

1. Template: ส่วนที่ใช้เขียนโครงสร้าง HTML ของ component
2. Script: ส่วนที่ใช้เขียน logic หรือ behavior ของ component ใน JavaScript
3. Style: ส่วนที่ใช้เขียน CSS สำหรับปรับแต่งหน้าตาของ component

ตัวอย่างของ 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 

1. เคลื่อนย้ายไฟล์ index.vue ของคุณเข้าไปในโฟลเดอร์ src/components ของโปรเจคที่คุณสร้าง
2. อ้างอิงและใช้ component index.vue ที่คุณสร้างใน src/App.vue หรือ src/views ของโปรเจค Vue CLI ของคุณ
3. ทำการบิวโปรเจค:

npm run build 

หลังจากการบิวเสร็จสิ้น, คุณจะเห็นโฟลเดอร์ dist ภายในโปรเจค ซึ่งเป็นไฟล์ที่ถูกคอมไพล์และพร้อมสำหรับการใช้งานใน production