1. Vue.js là gì?

Vue.js (hay đơn giản là Vue) là một framework JavaScript tiên tiến do Evan You phát triển, nhằm hỗ trợ lập trình viên trong việc xây dựng giao diện người dùng cũng như phát triển ứng dụng đơn trang (Single Page Application) dễ dàng và thân thiện. Với sự đơn giản trong việc học hỏi và khả năng tích hợp tốt với các thư viện hoặc dự án có sẵn, Vue.js đã trở thành một trong những framework hàng đầu trong lĩnh vực phát triển giao diện người dùng (UI).

Tính năng nổi bật của Vue.js:

• Khả năng tương tác tốt với các thư viện bên ngoài.
• Thiết kế hướng đối tượng giúp chia nhỏ ứng dụng thành các thành phần.
• Hỗ trợ hai chiều giữa dữ liệu và giao diện.

2. Vite là gì?

Vite là công cụ xây dựng front-end thế hệ mới, cũng do Evan You phát triển. Bắt đầu với việc hỗ trợ Vue.js, Vite đã mở rộng để hỗ trợ các framework như React và nhiều thư viện front-end khác. Vite mang đến trải nghiệm phát triển nhanh chóng và hiệu quả, giúp lập trình viên tiết kiệm thời gian và nỗ lực.

Tính năng của Vite:

• Hỗ trợ các ngôn ngữ và công nghệ như TypeScript, JSX, SCSS, LESS,
• Tiến trình xây dựng và phát triển tức thời, giúp việc phát triển trở nên mượt mà hơn.

3. Hướng dẫn cài đặt Vite

Để cài đặt Vite, bạn có thể sử dụng npm hoặc yarn. Trong bài viết này, mình sẽ hướng dẫn cài đặt bằng cách sử dụng npm trên Visual Studio Code. Chạy lệnh sau trong terminal:

npm install -g @vitejs/create

4. Tạo một dự án Vue bằng Vite

Bước 1: Mở terminal

Trước tiên, hãy mở terminal tại thư mục mà bạn muốn tạo dự án Vue. Ví dụ: D:\code\vue-demo.

Bước 2: Khởi tạo dự án Vite

Sử dụng lệnh sau để khởi tạo Vite:

npm create vite@latest

Trong quá trình khởi tạo, bạn sẽ được yêu cầu nhập tên dự án, ở đây mình chọn tên hello-vite. Bạn cũng có thể chọn loại framework phù hợp, trong trường hợp này, chọn Vue. Sau đó, bạn sẽ được hỏi về lựa chọn variant, lựa chọn đơn giản hơn với JavaScript. Tiếp theo, bạn chỉ cần đợi cho quá trình khởi tạo hoàn tất.

Bước 3: Thực hiện các lệnh tiếp theo

Khi quá trình khởi tạo hoàn tất, bạn cần thực hiện các lệnh sau:

• Di chuyển vào thư mục dự án vừa tạo:

cd hello-vite

• Cài đặt các thư viện:

npm install

• Cuối cùng, chạy server phát triển:

npm run dev

Giờ bạn đã có thể truy cập dự án Vue tại đường dẫn http://localhost:5173/. Kết quả đầu ra sẽ hiển thị như mong đợi.

5. Tổng kết

Qua bài viết này, bạn đã biết cách tạo một dự án Vue.js mới một cách nhanh chóng và dễ dàng bằng Vite và npm. Cảm ơn bạn đã theo dõi. Mọi góp ý và câu hỏi xin vui lòng để lại trong phần bình luận. Chân thành cảm ơn bạn!

Bài viết được tổng hợp từ nhiều nguồn khác nhau.
source: viblo