Skip to content

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-orders

Bỏ 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 dev

Phiê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.md

Khô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ệnhViệc
pnpm devChạy dev server (mặc định http://localhost:3000)
pnpm buildBuild Nitro vào .output
pnpm previewChạy bản build: node .output/server/index.mjs
pnpm lintESLint theo preset của core
pnpm typechecknuxi prepare rồi vue-tsc --noEmit
pnpm checklint + typecheck — chạy trước khi mở MR

Việc tiếp theo trong dự án

  1. Đổi tiêu đề và menuapp/app.config.ts. Menu là mảng NavItem (label, path, icon, permission, children); item khai permission sẽ tự ẩn với người không có quyền.
  2. Thay trang mẫu app/pages/orders/index.vue — nó đang dùng dữ liệu giả để chạy offline; đổi sang useApi khi có backend. Xem Trang danh sách.
  3. Điền .env theo 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.
  4. 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.