Giao diện
Tạo app mới
CLI create-tasco-app dựng sẵn một dự án Nuxt đã extends layer, có .npmrc, cấu hình lint/type, CI/CD mẫu và hai trang ví dụ. Cần chuẩn bị môi trường trước.
Chạy CLI
bash
npx @tasco/cli tasco-ordersBỏ trống tên thì CLI hỏi. Tuỳ chọn --pm <pnpm|npm|yarn> chỉ đổi package manager in trong hướng dẫn cuối, không đổi nội dung dự án.
bash
cd tasco-orders
cp .env.example .env
pnpm install
pnpm devPhiên bản @tasco/* trong package.json được ghim theo đúng bản CLI vừa chạy (^2.0.0 khi chạy CLI 2.0.0) — cả bộ đi cùng một số phiên bản.
Chạy được ngay, chưa cần IAM
Mở .env và bật chế độ giả lập đăng nhập:
bash
NUXT_AUTH_MOCK=true/auth/login nhận mọi tài khoản và trả về một người dùng giả có sẵn quyền /orders/search, /orders/create, /orders/update — đủ để đi hết luồng đăng nhập → menu → danh sách. Khi có endpoint IAM thật thì tắt cờ này và điền NUXT_AUTH_BASE_URL; xem Chạy dev không có IAM.
Thư mục sinh ra
tasco-orders/
├── app/
│ ├── app.config.ts # tiêu đề + menu (nav, topNav)
│ └── pages/
│ ├── index.vue # trang chủ công khai (auth: false)
│ └── orders/index.vue # trang danh sách mẫu
├── .env.example # mọi biến môi trường kèm chú thích
├── .npmrc # scope @tasco → group endpoint
├── nuxt.config.ts # extends @tasco/nuxt-layer-base
├── pnpm-workspace.yaml # allowBuilds cho pnpm 11
├── eslint.config.mjs # preset vue của @tasco/eslint-config
├── tsconfig.json # extends ./.nuxt/tsconfig.json
├── Dockerfile # base → check → builder → runner
├── docker-compose*.yml
├── .gitlab-ci.yml # check → build → deploy
├── scripts/deploy-prod.sh
├── CLAUDE.md, .mcp.json, .claude/ # ngữ cảnh cho AI tooling
└── README.mdKhông có app/app.vue, app/layouts/, app/middleware/, server/ — những thứ đó nằm trong layer. Dự án chỉ tạo khi thực sự cần ghi đè; xem Layer cung cấp gì.
Lệnh trong dự án
| Lệnh | Việc |
|---|---|
pnpm dev | Chạy dev server (mặc định http://localhost:3000) |
pnpm build | Build Nitro vào .output |
pnpm preview | Chạy bản build: node .output/server/index.mjs |
pnpm lint | ESLint theo preset của core |
pnpm typecheck | nuxi prepare rồi vue-tsc --noEmit |
pnpm check | lint + typecheck — chạy trước khi mở MR |
Việc tiếp theo trong dự án
- Đổi tiêu đề và menu ở
app/app.config.ts. Menu là mảngNavItem(label,path,icon,permission,children); item khaipermissionsẽ tự ẩn với người không có quyền. - Thay trang mẫu
app/pages/orders/index.vue— nó đang dùng dữ liệu giả để chạy offline; đổi sanguseApikhi có backend. Xem Trang danh sách. - Điền
.envtheo môi trường thật:NUXT_AUTH_BASE_URL,NUXT_API_PROXY_TARGET,NUXT_SESSION_SECRET. Xem Cấu hình & biến môi trường. - Sửa CI/CD cho khớp hạ tầng team: registry image, tag runner, cổng. Xem CI/CD & Deploy.
Tiếp theo
Hướng dẫn từng bước — dựng màn hình quản lý đơn hàng hoàn chỉnh trên chính dự án vừa tạo.