Hiện nay, các framework lập trình đã dần trở nên hoàn thiện và mạnh mẽ hơn bao giờ hết. Tuy nhiên, khi mới tiếp cận, nhiều người vẫn gặp khó khăn trong việc tạo một dự án kết hợp nhiều công nghệ như Electron, Vite và Vue. Việc tìm kiếm hướng dẫn cụ thể để tạo nhanh loại hình dự án này trên mạng thường không dễ dàng. Hầu như các tài liệu hiện có đều yêu cầu phải thực hiện theo từng bước từ đầu, điều này đôi khi khá phức tạp và mất thời gian.

Trong quá trình làm việc, tôi đã tình cờ phát hiện ra một dự án rất hữu ích là electron-vite — một công cụ giúp bạn tạo một dự án Electron + Vite + Vue chỉ trong vài phút mà không cần phải cấu hình thủ công nhiều bước. Với tiềm năng to lớn của nó, tôi muốn chia sẻ kinh nghiệm và hướng dẫn chi tiết để mọi người có thể bắt đầu dễ dàng hơn.

II. Giới thiệu về các framework sử dụng

1. Electron

!](image-aeke.png)

Electron là một tải game đánh bài đổi thưởng rút tiền framework cho phép bạn xây dựng ứng dụng desktop bằng JavaScript, HTML và CSS. Bằng cách tích hợp Chromium và Node.js vào gói nhị phân, Electron giúp bạn duy trì một mã nguồn JavaScript thống nhất để tạo ra ứng dụng hoạt động trên ba nền tảng chính: Windows, macOS và Linux. Điều tuyệt vời là bạn không cần bất kỳ kinh nghiệm nào về lập trình native để bắt đầu.

2. Vite

![

Trước đây, trước khi trình duyệt hỗ trợ ES Modules (ESM), việc phát triển phần mềm dạng module hóa trong JavaScript chưa từng tồn tại. Vì vậy, khái niệm “bundling” (gói mã) trở nên quen thuộc với chúng ta — các công cụ như webpack, Rollup hay Parcel được dùng để xử lý, liên kết và tạo ra các tập tin có thể chạy trong trình duyệt.

Tuy nhiên, khi quy mô ứng dụng ngày càng lớn, lượng mã JavaScript tăng lên hàng ngàn module khiến hiệu suất của các công cụ này bị giảm sút. Việc khởi động server hoặc refresh lại giao diện sau khi thay đổi file có thể kéo dài đến vài giây hoặc thậm chí vài phút.

Vite ra đời nhằm giải quyết những vấn đề này bằng cách tận dụng sự phát triển của hệ sinh thái hiện đại — đặc biệt là sự hỗ trợ ESM trực tiếp từ trình duyệt và việc sử dụng ngôn ngữ biên dịch trong các công cụ JS. Nhờ đó, tốc độ phát triển và phản hồi gần như tức thì.

3. Vue

Sm611 Win

Vue không chỉ là một framework, mà còn là một hệ sinh thái toàn diện phục vụ hầu hết các nhu cầu lập trình web. Thế giới Web cực kỳ phong phú và mỗi nhà phát triển có thể xây dựng các sản phẩm khác nhau về hình thức và quy mô. Chính vì thế, Vue được thiết kế với tính linh hoạt cao và khả năng tích hợp dần dần. Bạn có thể sử dụng Vue theo nhiều cách tùy theo mục tiêu của mình:

• Tăng cường trang HTML tĩnh mà không cần build
• Sử dụng dưới dạng Web Components trong bất kỳ trang nào
• Xây dựng ứng dụng đơn trang (SPA)
• Phát triển ứng dụng full-stack hoặc render server-side (SSR)
• Tạo website theo mô hình Jamstack hoặc generate static site (SSG)
• Thiết kế giao diện cho ứng dụng desktop, mobile, WebGL, thậm chí cả CLI

III. Chuẩn bị môi trường

Cài đặt Node.js

Địa chỉ tải Node.js và source code: . Hãy chọn phiên bản phù hợp với hệ điều hành của bạn và tiến hành cài đặt.

Sau khi cài xong, bạn có thể kiểm tra bằng lệnh:

1
2

node -v
npm -v

Lưu ý: electron-vite yêu cầu phiên bản Node.js 18+ hoặc 20+ và Vite 4.0+.

IV. Khởi tạo dự án Electron + Vite + Vue

Tạo dự án đầu tiên bằng electron-vite

Bạn 7win có thể sử dụng một trong các lệnh sau để tạo dự án:

1

npm create @quick-start/electron@latest

hoặc

1

yarn create @quick-start/electron

hoặc

1

pnpm create @quick-start/electron

Sau đó hãy điền thông tin theo hướng dẫn:

1
2
3
4
5
6
7

✔ Project name: … <electron-app>
✔ Select a framework: › vue
✔ Add TypeScript? … No / Yes
✔ Add Electron updater plugin? … No / Yes
✔ Enable Electron download mirror proxy? … No / Yes
Scaffolding project in ./<electron-app>...
Done.

Ngoài ra, bạn cũng có thể chỉ định tên và template ngay trong lệnh:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

# npm 6.x
npm create @quick-start/electron my-app --template vue

# npm 7+, thêm double-dash (--):
npm create @quick-start/electron my-app -- --template vue

# yarn
yarn create @quick-start/electron my-app --template vue

# pnpm
pnpm create @quick-start/electron my-app --template vue

Các template hiện đang được hỗ trợ gồm:

Chỉ cần chọn vue trong quá trình cấu hình, bạn sẽ sở hữu một dự án hoàn chỉnh với Electron + Vite + Vue!

Cài đặt các phụ thuộc

Sử dụng lệnh:

1

npm i

Sau khi chạy xong, bạn đã có một dự án hoàn chỉnh và sẵn sàng để phát triển! Đây là một phương pháp rất hiệu quả và tiết kiệm thời gian khi bắt đầu một dự án mới.