Cài đặt và khởi tạo dự án Vue.js
Vue.js hỗ trợ nhiều cách cài đặt khác nhau, tùy theo quy mô dự án. Nếu chỉ cần nhúng Vue vào một trang web đơn giản, bạn có thể sử dụng CDN. Nếu phát triển một ứng dụng lớn, Vue CLI hoặc Vite sẽ là lựa chọn tốt hơn. Trong bài học này, chúng ta sẽ tìm hiểu cách cài đặt Vue.js bằng ba phương pháp phổ biến và cách tổ chức thư mục trong một dự án Vue.js.
Cài đặt và khởi tạo dự án Vue.js
1. Cài đặt Vue.js qua CDN (dành cho dự án nhỏ)
Khi nào nên sử dụng?
- Khi bạn muốn thử nghiệm Vue.js nhanh chóng mà không cần cấu hình phức tạp.
- Khi chỉ cần nhúng Vue vào một trang HTML tĩnh.
Cách cài đặt:
Chỉ cần chèn đoạn mã sau vào thẻ <script> trong file HTML:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js CDN Example</title>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
<!-- Thêm Vue.js từ CDN -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
message: "Hello Vue.js!"
};
}
}).mount("#app");
</script>
</body>
</html>
Ưu điểm:
- Cài đặt nhanh chóng, không cần setup phức tạp.
- Phù hợp cho thử nghiệm hoặc trang web tĩnh.
Nhược điểm:
- Không phù hợp cho dự án lớn do thiếu công cụ hỗ trợ build.
2. Cài đặt Vue.js với Vue CLI (dành cho dự án lớn)
Khi nào nên sử dụng?
- Khi cần phát triển một ứng dụng Vue.js hoàn chỉnh.
- Khi muốn có sẵn công cụ hỗ trợ build, quản lý dependencies.
Yêu cầu:
- Cài đặt Node.js (tải từ nodejs.org).
- Kiểm tra phiên bản Node.js và npm:
node -v
npm -v
Cài đặt Vue CLI:
npm install -g @vue/cli
Tạo dự án Vue.js mới:
vue create my-vue-app
Chạy dự án:
cd my-vue-app
npm run serve
Ưu điểm:
- Cấu hình đầy đủ, có sẵn Vue Router, Vuex/Pinia.
- Hỗ trợ plugin và custom build dễ dàng.
Nhược điểm:
- Cài đặt nặng hơn so với CDN.
3. Cài đặt Vue.js với Vite (tối ưu hiệu năng)
Khi nào nên sử dụng?
- Khi muốn khởi tạo dự án nhanh hơn, build nhanh hơn.
- Khi làm việc với Vue 3 và TypeScript.
Cài đặt Vite:
npm create vite@latest my-vue-app --template vue
Chạy dự án:
cd my-vue-app
npm install
npm run dev
Ưu điểm:
- Build nhanh hơn Vue CLI nhờ ESBuild.
- Hỗ trợ TypeScript, JSX tốt hơn.
Nhược điểm:
- Chưa hỗ trợ Vue 2.
4. Cấu trúc thư mục của một dự án Vue.js
Sau khi tạo dự án với Vue CLI hoặc Vite, bạn sẽ thấy cấu trúc như sau:
my-vue-app
│── node_modules/ # Thư viện cài đặt qua npm
│── public/ # Chứa index.html
│── src/ # Source code chính
│ │── assets/ # Chứa hình ảnh, CSS
│ │── components/ # Chứa các component Vue.js
│ │── views/ # Chứa các trang (nếu dùng Vue Router)
│ │── App.vue # Component gốc
│ │── main.js # File khởi động Vue.js
│── .gitignore # Các file cần bỏ qua khi commit Git
│── package.json # Danh sách dependencies
│── vite.config.js # Cấu hình Vite (nếu dùng Vite)
│── README.md # Hướng dẫn dự án
Tóm tắt các thư mục chính:
-
src/components/: Chứa các component tái sử dụng. -
src/views/: Chứa các trang chính nếu dùng Vue Router. -
public/index.html: File HTML chính của ứng dụng. -
main.js: Nơi khởi tạo ứng dụng Vue.js.
Kết luận
Có nhiều cách để cài đặt Vue.js, tùy vào quy mô dự án:
- CDN: Dùng cho dự án nhỏ, cần nhúng Vue vào HTML đơn giản.
- Vue CLI: Dùng cho dự án lớn, có nhiều công cụ hỗ trợ.
- Vite: Dùng khi muốn build nhanh, tối ưu hiệu năng.
Với hơn 10 năm kinh nghiệm lập trình web và từng làm việc với nhiều framework, ngôn ngữ như PHP, JavaScript, React, jQuery, CSS, HTML, CakePHP, Laravel..., tôi hy vọng những kiến thức được chia sẻ tại đây sẽ hữu ích và thiết thực cho các bạn.
Xem thêm
Chào, tôi là Vũ. Đây là blog hướng dẫn lập trình của tôi.
Liên hệ công việc qua email dưới đây.
lhvuctu@gmail.com