Understanding the project structure is essential for efficient development. This guide covers the directory organization, file conventions, and architectural patterns used in the template.

The template follows a modular, scalable architecture with clear separation of concerns:

• Script Setup syntax for cleaner component code
• TypeScript everywhere with strict type checking
• Composable pattern for reusable logic
• Reactive state management with Pinia

• Atomic design principles with ui/, components/, and layout separation
• Props-based configuration for maximum flexibility
• Slot-based composition for extensibility
• TypeScript interfaces for prop validation

Flexible Layout Architecture

• mainLayout.vue: Base layout with theme and router setup
• sideLayout/: Sidebar navigation layout (default)
  • Collapsible sidebar with menu
  • Header with search and notifications
  • Breadcrumb navigation
• topLayout/: Top navigation layout (alternative)
  • Horizontal navigation bar
  • Dropdown menus for sections

Layout components:

• LayoutHeader.vue: Application header with actions
• LayoutSidebar.vue: Navigation sidebar
• LayoutBreadcrumb.vue: Dynamic breadcrumb navigation
• LanguageSwitcher.vue: Internationalization controls
• Notification.vue: Notification center
• SettingSheet.vue: Theme and preference settings

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "moduleResolution": "bundler",
    "target": "ES2020",
    "module": "ESNext"
  }
}

{
  "extends": "./tsconfig.json",
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

Vite Configuration (vite.config.ts)

• Vue plugin with TypeScript support
• Path aliases for clean imports
• Development server settings
• Build optimizations
• CSS preprocessing

Tailwind Configuration (tailwind.config.js)

• Design system tokens
• Custom component styles
• Dark mode configuration
• Plugin integrations

• PascalCase for component names: UserTable.vue, OrderDetail.vue
• kebab-case for directories: user-management/, order-detail/
• index files for barrel exports: components/index.ts

• camelCase for utilities: formatDate.ts, apiClient.ts
• PascalCase for classes: ApiClient.ts, UserService.ts
• lowercase for configuration: router.ts, store.ts

• kebab-case for images: user-avatar.png, company-logo.svg
• descriptive names for CSS: global.css, components.css

Pinia Store Structure (/src/stores/)

• user.ts: User authentication and profile state
• setting.ts: Application settings and preferences
• index.ts: Store configuration and plugins

Each store follows the composition API pattern:

export const useUserStore = defineStore('user', () => {
  const user = ref<User | null>(null)
  const isLoggedIn = computed(() => !!user.value)

  function login(credentials: LoginCredentials) {
    // Login logic
  }

  return { user, isLoggedIn, login }
})

Locales Structure (/src/locales/)

• en-US.json: English translations
• zh-CN.json: Chinese translations
• index.ts: i18n configuration
• types.ts: Translation type definitions

Translation key structure:

{
  "common": {
    "buttons": {
      "save": "Save",
      "cancel": "Cancel"
    }
  },
  "pages": {
    "dashboard": {
      "title": "Dashboard"
    }
  }
}

Reusable Logic (/src/hooks/)

• useMediaQuery.ts: Responsive design utilities
• useThemeColor.ts: Theme management
• useGlobalSearch.ts: Search functionality
• useAlertDialog.ts: Dialog management

Context Providers (/src/providers/)

• AlertDialogProvider: Global dialog management
• Centralized state for cross-component communication
• Type-safe context injection

Each major component includes:

• README.md: Component overview and usage
• types/: TypeScript definitions
• composables/: Logic hooks
• components/: Sub-components
• sample.vue: Usage examples (where applicable)

The project uses path aliases for clean imports:

// Instead of
import UserTable from '../../../components/UserTable.vue'

// Use clean paths
import UserTable from '@/components/UserTable.vue'
import { formatDate } from '@/utils/date'
import { useUserStore } from '@/stores/user'

Common aliases:

• @/ → src/
• @/components/ → src/components/
• @/views/ → src/views/
• @/utils/ → src/utils/