Project Structure

การจัดการโครงสร้างโปรเจค Vue ที่ดีจะช่วยให้โค้ดมีความเป็นระเบียบ ง่ายต่อการบํารุงรักษา และขยายฟีเจอร์ในอนาคต

โครงสร้างพื้นฐาน

src/
├── assets/         # รูปภาพ, fonts, global CSS
├── components/     # Reusable components
├── composables/    # Composable functions
├── views/          # หน้าต่างๆ ของแอพ
├── services/       # API calls, external services
├── stores/         # Pinia stores
├── types/          # TypeScript type definitions
└── utils/          # Helper functions, constants

Component Organization

การจัดการ Components ควรแบ่งตาม feature หรือ functionality และใช้ Single File Components (SFC)

ตัวอย่างโครงสร้าง Components

components/
├── base/             # Base/UI components
│   ├── BaseButton/
│   ├── BaseInput/
│   └── BaseCard/
├── features/         # Feature-specific components
│   ├── auth/
│   └── dashboard/
└── layout/          # Layout components
	├── TheHeader/
	└── TheFooter/

File Naming Conventions

การตั้งชื่อไฟล์ที่เป็นมาตรฐานช่วยให้ทีมทํางานร่วมกันได้ง่ายขึ้น

ประเภท	Convention	ตัวอย่าง
Components	PascalCase	UserProfile.vue
Base Components	Prefix with 'Base'	BaseButton.vue
Layout Components	Prefix with 'The'	TheHeader.vue
Composables	camelCase, prefix with 'use'	useAuth.ts
Stores	camelCase, suffix with 'Store'	userStore.ts
Types	PascalCase, suffix with 'Type'	UserType.ts

Component Structure

การจัดเรียง code ใน Single File Component (SFC) ที่เป็นระเบียบ

<script setup lang="ts">
// Type imports
import type { User } from "@/types";

// Component imports
import BaseButton from "@/components/base/BaseButton.vue";

// Composables
import { useUser } from "@/composables/useUser";

// Props & Emits
defineProps<{
  user: User;
}>();

// Rest of the logic
</script>

<template>
  <div class="user-profile">
    <!-- Template content -->
  </div>
</template>

<style scoped>
/* Component styles */
</style>

Environment Configuration

การจัดการ environment variables ที่ดีช่วยให้แอพทํางานได้ถูกต้องในแต่ละ environment

.env                # Default env vars
.env.development    # Development environment
.env.staging        # Staging environment
.env.production     # Production environment

Testing Structure

การจัดการไฟล์ test ที่ดีช่วยให้การเขียนและดูแล test cases ทําได้ง่าย

src/
├── components/
│   └── BaseButton/
│       ├── BaseButton.vue
│       ├── BaseButton.test.ts
│       └── BaseButton.stories.ts
└── composables/
	├── useAuth.ts
	└── __tests__/
		└── useAuth.test.ts