1. โครงสร้างพื้นฐานของโปรเจกต์ Vue.js

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

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

คำอธิบายโฟลเดอร์และไฟล์

• node_modules/: เก็บไฟล์ dependencies ที่โปรเจกต์ต้องการ (ไม่ควรแก้ไข)
• public/: เก็บไฟล์ Static เช่น index.html, รูปภาพ, หรือไฟล์อื่นๆ ที่ไม่ต้องผ่าน Webpack
• index.html: ไฟล์หลักที่ใช้แสดงผลในเบราว์เซอร์ Vue.js จะถูกฝังลงในไฟล์นี้
• src/: โฟลเดอร์หลักสำหรับการพัฒนาแอปพลิเคชัน
• assets/: เก็บไฟล์ Static เช่น รูปภาพและไฟล์ CSS ที่เกี่ยวข้องกับโปรเจกต์
• components/: เก็บ Component ที่เราใช้งานในแอป
• App.vue: Component หลักของโปรเจกต์ ซึ่งรวมทุกส่วนประกอบของแอป
• main.js: ไฟล์เริ่มต้นที่เชื่อมโยง Vue.js เข้ากับ HTML
• package.json: เก็บข้อมูลโปรเจกต์และ dependencies
• babel.config.js: กำหนดค่าการแปลงโค้ด JavaScript ด้วย Babel

2. ความสำคัญของไฟล์ main.js

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

คำอธิบาย:

• createApp(App): สร้างแอป Vue โดยใช้ Component หลัก App.vue
• .mount('#app'): เชื่อมต่อแอปกับ DOM ที่มี id="app" ใน index.html

ตัวอย่าง DOM:

<div id="app"></div>

3. โครงสร้างของ App.vue

ไฟล์ App.vue มีโครงสร้างแบ่งเป็น 3 ส่วน:

<template>
  <div id="app">
    <h1>Welcome to Vue.js</h1>
    <p>This is the main component</p>
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

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

คำอธิบาย:

1. <template>: กำหนด HTML ที่ใช้แสดงผล
2. <script>: เขียน JavaScript สำหรับกำหนดข้อมูลหรือฟังก์ชัน
3. <style>: เขียน CSS สำหรับกำหนดรูปแบบของ Component

4. การเพิ่ม Component ใหม่

ขั้นตอน:

1. สร้างไฟล์ Component ใหม่ในโฟลเดอร์ src/components/ เช่น HelloWorld.vue
2. เพิ่มโค้ดในไฟล์:

<template>
  <div>
    <h2>Hello World Component</h2>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
};
</script>

3. นำ Component มาใช้ใน App.vue:

<template>
  <div id="app">
    <h1>Main App</h1>
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'App',
  components: {
    HelloWorld
  }
};
</script>

5. สรุป

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

• โครงสร้างพื้นฐานของโปรเจกต์ Vue.js
• การทำงานของไฟล์ main.js และ App.vue
• การสร้างและเพิ่ม Component ใหม่

ในบทถัดไป เราจะเจาะลึกเกี่ยวกับการสร้าง Component และการใช้ Props เพื่อส่งข้อมูลระหว่าง Component!