1. Chuẩn bị môi trường phát triển

Để bắt đầu phát triển ứng dụng Vue.js với Vue CLI, bạn cần đảm bảo rằng Node.js và trình quản lý gói npm đã được cài đặt trên hệ thống của mình.

1.1. Cài đặt Node.js

Bạn có thể tải xuống trình cài đặt Node.js từ trang web chính thức (https://nodejs.org/zh-cn/). Quá trình cài đặt thường rất đơn giản: chỉ cần chạy file cài đặt và làm theo các bước hướng dẫn. Các phiên bản Node.js gần đây thường tự động thiết lập các biến môi trường cần thiết, giúp bạn tiết kiệm thời gian cấu hình thủ công.

Sau khi cài đặt xong, hãy mở cửa sổ dòng lệnh (CMD trên Windows hoặc Terminal trên macOS/Linux) và gõ lệnh sau để kiểm tra phiên bản Node.js:

node -v

Nếu hệ thống hiển thị số phiên bản của Node.js, điều đó có nghĩa là Node.js đã được cài đặt thành công.

1.2. Kiểm tra npm và cấu hình registry

npm (Node Package Manager) được cài đặt kèm theo Node.js. Để kiểm tra phiên bản npm, sử dụng lệnh:

npm -v

Để tối ưu hóa tốc độ tải các gói npm, đặc biệt khi ở các khu vực có kết nối mạng tới máy chủ mặc định của npm chậm, bạn có thể cấu hình npm sử dụng một registry thay thế như Taobao. Điều này thường cải thiện đáng kể tốc độ tải gói.

npm config set registry https://registry.npm.taobao.org

Để xác minh rằng registry đã được thay đổi, bạn có thể chạy lệnh:

npm config get registry

Kết quả hiển thị URL của registry Taobao là dấu hiệu cho thấy cấu hình đã thành công.

Một lựa chọn khác là cài đặt cnpm, một phiên bản thay thế của npm được tích hợp sẵn với registry Taobao. Lệnh cài đặt cnpm toàn cục:

npm install -g cnpm --registry=https://registry.npm.taobao.org

Sau khi cài đặt cnpm, bạn có thể kiểm tra phiên bản của nó:

cnpm -v

Với Node.js và npm (hoặc cnpm) đã được cấu hình, môi trường phát triển của bạn đã sẵn sàng cho bước tiếp theo.

2. Cài đặt Vue CLI phiên bản 4.5

Vue CLI là bộ công cụ dòng lệnh chính thức để tạo và quản lý các dự án Vue.js. Để cài đặt phiên bản mới nhất của Vue CLI (ví dụ: 4.5.x), bạn cần cài đặt nó toàn cục trên hệ thống:

npm install -g @vue/cli

Trong trường hợp quá trình tải xuống gặp vấn đề về tốc độ, bạn có thể sử dụng cnpm (nếu đã cài đặt) hoặc chỉ định registry Taobao trực tiếp trong lệnh cài đặt:

cnpm install -g @vue/cli

hoặc

npm install -g @vue/cli --registry=https://registry.npm.taobao.org

Sau khi cài đặt, bạn có thể kiểm tra phiên bản Vue CLI đã được cài đặt bằng cách sử dụng cờ -V (chữ hoa):

vue -V

Nếu một số phiên bản (ví dụ: 4.5.x) được hiển thị, Vue CLI đã được cài đặt thành công.

3. Tạo dự án Vue.js mới

Để tạo một dự án Vue.js mới, hãy điều hướng đến thư mục mà bạn muốn lưu trữ dự án của mình trong cửa sổ dòng lệnh. Sau đó, chạy lệnh vue create với tên dự án mong muốn. Tên dự án nên viết thường và không chứa ký tự đặc biệt:

vue create du-an-web-cua-toi

Vue CLI sẽ đưa ra một số câu hỏi về cấu hình dự án. Chọn tùy chọn Manually select features để tự tay lựa chọn các tính năng cần thiết.

3.1. Lựa chọn các tính năng

Sử dụng phím mũi tên để di chuyển và phím cách (Spacebar) để chọn hoặc bỏ chọn các tính năng. Dưới đây là danh sách các tính năng phổ biến bạn có thể muốn bao gồm:

• Choose Vue version: Chọn phiên bản Vue.js (2.x hoặc 3.x).
• Babel: Cần thiết để chuyển đổi cú pháp JavaScript hiện đại (ES6+) sang dạng tương thích với các trình duyệt cũ hơn.
• TypeScript: Nếu bạn muốn sử dụng TypeScript thay vì JavaScript thuần.
• Router: Thư viện định tuyến chính thức của Vue.js để quản lý các tuyến đường (routes) trong ứng dụng.
• Vuex: Thư viện quản lý trạng thái tập trung, cần thiết cho các ứng dụng lớn hoặc có nhiều thành phần chia sẻ trạng thái.
• CSS Pre-processors: Hỗ trợ các bộ tiền xử lý CSS như Sass/SCSS, Less, Stylus.
• Linter / Formatter: Giúp duy trì phong cách mã hóa nhất quán và phát hiện lỗi cú pháp.
• Unit Testing: Thêm khả năng kiểm thử đơn vị cho các thành phần của bạn.
• E2E Testing: Thêm khả năng kiểm thử đầu cuối (End-to-End).

Sau khi lựa chọn xong các tính năng, nhấn Enter.

3.2. Cấu hình chi tiết

Tiếp theo, Vue CLI sẽ yêu cầu bạn cấu hình chi tiết cho từng tính năng đã chọn:

• Chọn phiên bản Vue.js: Khuyến nghị chọn 2.x cho các dự án yêu cầu sự ổn định cao.
• Sử dụng history mode cho Vue Router: Chọn No (n) nếu bạn muốn sử dụng chế độ hash (thân thiện hơn với việc triển khai trên các máy chủ tĩnh mà không cần cấu hình phía máy chủ).
• Chọn bộ tiền xử lý CSS: Sass/SCSS (with dart-sass) là một lựa chọn phổ biến và mạnh mẽ.
• Chọn cấu hình Linter/Formatter: ESLint + Prettier thường được khuyến nghị để có quy tắc kiểm tra và định dạng mã hiệu quả.
• Thời điểm kiểm tra và sửa lỗi mã nguồn (Lint on save/commit): Chọn Lint on save để tự động kiểm tra khi bạn lưu file.
• Nơi lưu trữ cấu hình cho Babel, ESLint, v.v.: Chọn In dedicated config files để giữ các file cấu hình riêng biệt, làm cho thư mục dự án gọn gàng hơn.
• Lưu cấu hình hiện tại làm preset cho các dự án sau: Thường chọn No (n) để tránh ghi đè các tùy chọn mặc định cho các dự án trong tương lai.

Sau khi hoàn tất các lựa chọn, Vue CLI sẽ bắt đầu tạo dự án và cài đặt các phụ thuộc. Quá trình này có thể mất vài phút.

Khi quá trình hoàn tất, bạn sẽ nhận được thông báo về việc dự án đã được tạo thành công và các lệnh cần thiết để khởi chạy nó.

4. Khởi chạy dự án Vue.js

Để xem ứng dụng Vue.js của bạn hoạt động, hãy điều hướng vào thư mục dự án và chạy máy chủ phát triển cục bộ:

1. Mở cửa sổ dòng lệnh và chuyển đến thư mục gốc của dự án của bạn (ví dụ: cd du-an-web-cua-toi).
2. Thực thi lệnh sau để khởi động máy chủ phát triển:

npm run serve

Khi máy chủ đã chạy, bạn sẽ thấy một địa chỉ URL (thường là http://localhost:8080/) được hiển thị. Mở trình duyệt web của bạn và truy cập địa chỉ này để xem ứng dụng Vue.js mặc định đang chạy.

5. Vận hành dự án bằng Visual Studio Code

Nếu bạn sử dụng Visual Studio Code (VS Code), quá trình mở và chạy dự án có thể được thực hiện trực tiếp từ giao diện IDE:

1. Trong VS Code, chọn File > Open Folder... và chọn thư mục gốc của dự án Vue.js của bạn.
2. Mở Terminal tích hợp của VS Code bằng cách chọn Terminal > New Terminal (hoặc sử dụng phím tắt Ctrl+`).
3. Trong cửa sổ Terminal, đảm bảo bạn đang ở trong thư mục gốc của dự án, sau đó nhập lệnh khởi chạy máy chủ phát triển:

npm run serve

VS Code sẽ hiển thị thông báo về quá trình khởi chạy máy chủ, bao gồm địa chỉ URL để xem ứng dụng. Nhấp vào liên kết URL đó hoặc dán vào trình duyệt của bạn để xác nhận rằng dự án đang hoạt động bình thường.