import {Meta} from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/vi/scripts/bin/dxt-component - Tạo Cấu Trúc Thành Phần'/>

# dxt-component

Lệnh `dxt-component` cung cấp khả năng tự thiết lập cấu trúc (scaffolding) nhanh chóng cho hệ thống thiết kế. Lệnh này sử dụng các kiến trúc `ComponentCreator` và `ComponentItem` chuyên dành cho việc tự động thu thập và nạp tự động hệ sinh thái mã chuẩn vào các thư mục cấu thành hiện đang trống rỗng.

## Các tính năng chính

- **Tự động Khởi tạo Thư mục**: Truy tìm những cấu trúc thư mục rỗng bên trong kiến trúc `src/components` để bắt đầu dàn dựng hàng loạt đoạn mã vue từ hệ mẫu tích hợp.
- **Nạp Mẫu Tự Động Đầu Vào**: Quá trình nhanh chóng đẩy mọi khuôn khai báo chuỗi (`ComponentDoc` hay tên danh định hiện tại `[project]`) thế vào tài nguyên chung một cách mượt mà và ẩn danh.

## Nó hoạt động như thế nào?

Cấu hình phân luồng này chủ động tự thay thế việc tổ chức các thư mục với lặp đi lặp lại:

1. Cấu trúc `ComponentCreator` với vai trò là một luồng quét, tự động phân hóa các kiến trúc nằm tập trung chặt chẽ tại `src/components`. Nó sẽ làm nổi bật các ngăn chứa (directory) đang được cho là hoàn toàn không chứa dữ liệu.
2. Phân tách mỗi một nhánh rỗng đó, mã sẽ điều phối kích hoạt cấp `ComponentItem`. Tại đây công cụ nạp vào những dạng thức tệp khuôn mẫu cấu trúc đã cho trước.
3. Kế tiếp sẽ là một quy trình hoán đổi dữ liệu chuỗi ký tự cơ bản, thay thế nội dung vùng nhắm bằng dữ liệu danh xưng cấu trúc chính xác cộng hưởng cùng bối cảnh ứng dụng hiện hành. Cho ra kết quả mã hóa nguồn cơ bản dán thẳng cập nhật vào định dạng tệp chuẩn.

## Cách thiết lập và khởi chạy

Toàn bộ quy trình sẽ không thiết lập ràng buộc với những cấu hình phức tạp. Công cụ này chủ động phân tích tệp `package.json` của bạn nhằm trích xuất trường `name`, và nó sẽ tự động được sử dụng để đưa vào thế chỗ cho bất kỳ trình đánh dấu mẫu `[project]` nào.

Với khả năng nhận diện thư mục rỗng cùng khởi động tự động toàn bộ vùng không gian làm việc, lệnh cần thiết chỉ bao gồm gọi đoạn thực thi sau:
```bash
npx dxt-component
```

## Cấu trúc tệp được tạo sinh

Khi một thành phần mới được tự động thiết lập khung, nó sẽ kế thừa cấu trúc từ các mẫu nội bộ:

- `[ComponentName].vue`: Cấu trúc thành phần Vue 3 dạng chuẩn chứa `<script setup>`, khai báo kiểu và khởi tạo sẵn `<style lang="scss">`.
- `index.ts`: Ánh xạ luồng xuất dữ liệu cho thành phần Vue (`export const [ComponentName]`).
- `types.ts`: Các định dạng kiểu cốt lõi TypeScript dành cho hệ `Props`, `Emits`, `Slots`, và `Defaults`.
- `subcomponents/`: Một danh mục trống (đi kèm `.gitignore`) để sẵn sàng chứa các thành phần con cục bộ bên trong.
- `wiki/[ComponentName].mdx`: Tệp tài liệu ghi chú Storybook chuẩn MDX gọi cấu trúc tích hợp từ `@dxtmisha/wiki/storybook`.
- `wiki/[ComponentName].stories.ts`: Tệp mã lệnh hoạt động Storybook Vue 3 nguyên bản định danh trực quan của bản demo xuất thành phần.
- `wiki/run.ts`: Tệp văn bản thực thi phím tắt node, ra đời nhằm kích hoạt siêu tốc chuỗi lệnh chỉ huy khởi sinh bằng AI (`dxt-component-wiki`) nhắm đích cụ thể tới duy nhất thành phần tại thư mục đó.
