Công nghệ
builderx_spa là site builder trên web, là engine của Storecake Editor. Đây là một Single Page Application Vue 3, đi kèm một server Express nhỏ để serve entry kiểu SSR, host static asset và proxy một vài endpoint.
Kiến trúc
Mô tả cách builderx_spa được phân lớp và tương tác với phần còn lại của hệ thống.
Cấu trúc dự án
Bản đồ thư mục của builderx_spa. Mọi đường dẫn tính tương đối từ thư mục gốc của repo.
Cài đặt
Yêu cầu chuẩn bị
Routing và Guard
Cách Vue Router được khai báo trong builderx_spa và các guard bảo vệ từng route.
Pinia store
Quy ước và danh mục store đặt trong src/stores/.
Tầng API
Tầng src/api/ đảm nhiệm toàn bộ HTTP/HTTPS đi tới các backend (builderxapi, landingpage_backend, một số bên thứ ba). Mục tiêu: một bộ interceptor axios duy nhất, gộp request trùng, dễ mock, view không phải bận tâm tới chi tiết transport.
Đa ngôn ngữ (i18n)
builderx_spa dùng vue-i18n 9 kết hợp tiện ích VS Code i18n-ally để quản lý khoá dịch.
Biến môi trường
Cấu hình runtime tách thành hai phần:
Build và Deploy
builderx_spa build bằng Vite, đóng gói cùng server.js và triển khai lên server bằng Ansible.
Editor V2
11 items
Components
Bộ design system của Storecake xây dựng trên Ant Design Vue 3. Mỗi component dùng chung kế thừa API gốc của Ant Design rồi thêm một lớp props riêng cho dự án.
Extension & quy ước code
Quy ước code và bộ công cụ editor cho repo builderx_spa.
Tài liệu tham khảo
Tóm tắt ngắn các pattern team đang dùng trong builderx_spa, kèm link tới tài liệu chính chủ.
Xử lý sự cố
Các vấn đề thường gặp khi phát triển builderx_spa. Khi gặp lỗi mới, ghi lại ngay vào đây để người sau tra cứu.