Cài đặt môi trường phát triển

Trong bài học này, bạn sẽ được hướng dẫn chi tiết cách chuẩn bị môi trường làm việc với Nuxt 3. Chúng ta sẽ cùng cài đặt các công cụ cần thiết như Node.js và VSCode, sau đó sử dụng nuxi – CLI chính thức của Nuxt – để khởi tạo project đầu tiên. Bài học cũng sẽ cung cấp giải thích rõ ràng cho các lệnh cơ bản và cách xử lý một số lỗi phổ biến khi cài đặt.

Mục tiêu bài học

• Cài đặt đầy đủ môi trường phát triển Nuxt 3
• Biết sử dụng nuxi CLI để khởi tạo project
• Hiểu các lệnh cơ bản để chạy và phát triển dự án
• Biết cách xử lý lỗi thường gặp khi setup

Cài đặt môi trường phát triển

1. Cài đặt Node.js và VSCode

Node.js

• Truy cập: https://nodejs.org
• Tải phiên bản LTS (khuyên dùng)
• Sau khi cài, kiểm tra:

node -v
npm -v

Yêu cầu: Node ≥ 18

VSCode

• Truy cập: https://code.visualstudio.com
• Cài đặt các extension gợi ý:
  • Vue Language Features (Volar)
  • Prettier
  • ESLint
  • Tailwind CSS IntelliSense (nếu dùng Tailwind sau này)

2. Cài đặt Nuxt 3 bằng nuxi CLI

Tạo project Nuxt mới:

npx nuxi init my-nuxt-app

• npx: chạy lệnh từ npm mà không cần cài đặt toàn cục
• nuxi init: tạo scaffold project
• my-nuxt-app: tên thư mục project (bạn có thể đổi tùy ý)

Di chuyển vào thư mục và cài package:

cd my-nuxt-app
npm install

3. Giải thích các câu lệnh cơ bản

Khởi chạy project lần đầu:

npm run dev

• Kết quả: bạn có thể truy cập trang ở http://localhost:3000

4. Các lỗi thường gặp và cách xử lý

Kết luận

Việc cài đặt đúng môi trường là bước đầu tiên quan trọng để học và làm việc với Nuxt.js. Bạn đã biết cách cài đặt Node.js, VSCode và sử dụng nuxi CLI để tạo project Nuxt 3 cơ bản. Bên cạnh đó, bạn cũng đã nắm các lệnh thường dùng và biết cách xử lý một số lỗi phổ biến. Trong bài tiếp theo, chúng ta sẽ bắt đầu làm việc với project vừa tạo – tìm hiểu cách Nuxt tự động tạo routing và hiển thị trang đầu tiên.