Cấu trúc Code (Code Structure)#
Dự án áp dụng cấu trúc thư mục tiêu chuẩn và quy chuẩn (Standard Vue 3 + Vite structure) với tính năng chia để trị (modularity) cao.Chi tiết cấp thư mục gốc (Root Directory)#
/
├── public/ # Tài nguyên public tĩnh không qua build process (favicon, hình cứng)
├── src/ # Source code chính của hệ thống Admin
├── .husky/ # Cấu hình git hooks (kiểm tra trước khi commit/push)
├── .eslintrc.cjs # Cấu hình ESLint (kiểm tra lỗi code js/ts)
├── .prettierrc.json # Cấu hình Prettier (format định dạng code)
├── vite.config.ts # Cấu hình Vite build process và plugins
├── tailwind.config.ts # Cấu hình TailwindCSS
├── package.json # Danh sách dependencies và script commands
└── tsconfig.json # Cấu hình TypeScript compiler
Khám phá lớp src/ (Lớp lõi)#
Cấu trúc trong src/ tuân thủ pattern phân tách lớp giao diện và lớp dữ liệu:src/
├── App.vue # Component gốc (Root Component)
├── main.ts # Entry point, khởi tạo Vue App, cài đặt Router, Pinia
├── assets/ # Các file tĩnh nội bộ được Vite xử lý (css, images, scss)
├── components/ # Các UI Component sử dụng chung (Buttons, Modals, Forms...)
├── composables/ # Các hàm tái sử dụng chung cho Vue 3 Composition API (ví dụ: hooks useFetch, useAuth...)
├── configs/ # Các biến số cấu hình, enum, cấu hình môi trường ứng dụng
├── data/ # Mock data, hoặc các object data mẫu static
├── layouts/ # Định nghĩa các khung sườn giao diện (ví dụ: DefaultLayout.vue chứa Sidebar, Header; AuthLayout.vue trắng)
├── plugins/ # Code để setup các thư viện ngoài tích hợp vào Vue (i18n, custom directives)
├── router/ # Vue Router, định nghĩa toàn bộ đường dẫn URL và Guard (Auth Guard)
├── services/
│ └── api/ # Chứa các file khai báo hàm Axios gọi đến Backend, mỗi thực thể 1 file riêng biệt (auth.ts, domains.ts, keywords.ts...)
├── stores/ # Pinia global state. Chứa data cache tại trình duyệt (user info, token, themes)
├── types/ # Các TypeScript Interfaces / Types chung của dự án, quy định kiểu dữ liệu cho Models
└── views/ # Các components đóng vai trò là Trang (Pages) độc lập. Được tổ chức thành từng domain feature.
Kiến trúc thư mục views/ (Phân chia theo nghiệp vụ)#
Được cấu trúc cực kì mạch lạc theo tính năng (Feature-based structure). Một vài thư mục nổi bật:activities/, auth/, home/, errors/: Trang hệ thống cơ bản.
brand-image/, brands/: Quản lý thương hiệu.
domain-final/, domain-redirect/, groups/, whitelist-domains/: Liên quan đến hệ thống quản lý tên miền.
keyword-management/, keywords/, template-keyword/: Khối quản lý từ khóa, nội dung.
templates/, template-defaults/: Khối tạo dựng mẫu Landing page.
proxies/, providers/: Khối điều khiển tài nguyên ảo.
report-index/, traffics/, volumes/: Khối báo cáo, biểu đồ.
Flow Code Căn Bản Cho 1 Màn Hình#
1.
Routing (router/) ánh xạ một path (ví dụ /keywords) tới một Vue Component trong views/.
2.
View Component (views/keywords/Index.vue) khi mount sẽ khởi tạo trạng thái và gọi API.
3.
Component sử dụng services/api/keywords.ts để request HTTP lấy dữ liệu.
4.
Data được ném vào biến Ref/Reactive và truyền qua components/ (như DataTable, TableForm) để render giao diện sử dụng Naive UI và Tailwind CSS, hoặc lưu vào stores/ qua Pinia nếu cần dùng toàn ứng dụng.
5.
Typings chung được lấy từ types/.
Cấu trúc hiện đại và tiêu chuẩn của Vite + Vue 3 mang lại sự minh bạch, phân chia chức năng rõ ràng để mở rộng dễ dàng (Clean Code).Ngày cập nhật 2026-03-31 10:15:55