Ngày nay, với sự phát triển của công nghệ, các ứng dụng desktop dần được thay thế và chuyển đổi lên nền tảng web browser, việc xây dựng các ứng dụng web ngày càng trở nên phức tạp, đòi hỏi lập trình viên phải có kiến thức, kinh nghiệm và trải nghiệm để xây dựng những trang web có giao diện đẹp đồng thời đảm bảo hiệu năng cũng như cải thiện trải nghiệm người dùng.
Với cộng đồng mạnh mẽ, các thư viện cũng như frame work xây dựng giao diện người dùng ngày càng phát triển và trở nên mạnh mẽ, nổi bật trong số những framework xây dựng giao diện người dùng được những lập trình viên ưa chuộng nhất hiện nay chính là Vue.js.
Bài viết này mình sẽ giới thiệu về phiên bản mới nhất của Vue.js và hệ sinh thái của nó.
Table of contents
Open Table of contents
Giới thiệu về frontend framework Vue.js version 3
Như trang chủ của vue có giới thiệu, Vue (phát âm tương tự như từ view trong tiếng anh) là một Framework tiên tiến trong việc xây dựng giao diện người dùng.
Các ưu điểm của vue có thể kể đến như
- Dễ học: Vue.js có cú pháp đơn giản, dễ học, bạn có thể làm quen với cú pháp và xây dựng ứng dụng chỉ sau vài giờ học tập.
- Linh hoạt: Vue.js có thể xây dựng các ứng dụng từ quy mô nhỏ hoặc có thể xây dựng các ứng dụng phức tạp. GitLab một nền tảng quản lý mã nguồn, CI, CD nổi tiếng trên thế giới đang sử dụng vue để xây dựng giao diện người dùng.
- Nhanh, mạnh mẽ: Vue.js được cho là nhanh hơn mộ số các framework cũng như thư viện khác nhờ thuật toán cập nhật DOM hiệu quả cũng như cơ chế reactivity.
- Tích hợp dễ dàng: Bạn có thể sử dụng Vue.js thông qua một thẻ script và có thể tiến hành code vue một cách dễ dàng.
- Cộng đồng lớn: Vue.js tuy là một framework sinh sau đẻ muộn nhưng số lượng sao trên github đã đạt đến con số hơn 200k, cộng đồng mạnh mẽ với các hội nhóm trên các mạng xã hội như Facebook, Telegram, Discord …
Vue.js phiên bản 3 có gì để trở nên khác biệt
Là phiên bản mới nhất của vue được phát hành cuối nằm 2020 vue 3 có nhiều cải tiến so với thế hệ trước của mình, một số cải tiến có thể kể đến như:
- Kích thước nhỏ hơn
- Hiệu năng cao hơn
- Khả năng tái sử dụng cao hơn
- Hỗ trợ TypeScript tốt hơn
- Composition API
Hệ sinh thái của Vue.js
Vue là một framework mạnh mẽ và hệ sinh thái của nó có thể kể đến như
- Vite: một tool build mạnh mẽ hỗ trợ host module reload giúp việc phát triển trở nên nhanh chóng và hiệu quả
- Điều hướng SPA với vue router
- Quản lý State với VueX, Pinia
- Localization với Vue I18n
- UI library như Element Plus, Ant Design, DevExtreme …
- Xây dựng unit test với vitest, cypress …
- Xây dựng các ứng dụng server side rendering, static site generate với NuxtJS
Khởi tạo một ứng dụng Vue.js với vite, composition api, script setup
Mặc đinh khi khở tạo ứng dụng, vue sử dụng build tool nhà trồng được là Vite (phát âm là vít không phải vai nhé).
Để chạy được ứng dụng với vue, chúng ta cần có nodejs và npm được cài trong máy, kiểm tra xem nodejs đã được cài trên máy của bạn chưa bằng lệnh sau
node - v;v18.12.1Nếu node js của bạn chạy phiên bản thấp hơn v16 hoặc chưa có thì bạn lên trang chủ của nodejs và tải về phiên bản mới nhé. Nếu bạn đã có nodejs phiên bản lớn hơn v16 thì bắt đầu thôi nào.
Chạy lệnh sau để tạo mới một project vue
npm init vue@latestỞ series cơ bản này mình sẽ không sử dụng router và store
➜ npm init vue@latest
Vue.js - The Progressive JavaScript Framework
√ Project name: ... todo-list
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes
Scaffolding project in C:\Data\Trainning\codergenz\todo-list...
Done. Now run:
cd todo-list
npm install
npm run devVue.js 3 folder structure
├── public/
├── src/
│ ├── assets/
│ │ ├── images/
│ │ └── styles/
│ ├── components/
│ │ └── HelloWorld.vue
│ ├── App.vue
│ └── main.ts
├── index.html
├── .gitignore
├── package.json
├── tsconfig.json
└── vite.config.tsThư mục public
- Các file trong thư mục public sẽ được sao chép trực tiếp vào thư mục dist sau khi build
Thư mục src
- Là nơi chứa mã nguồn của ứng dụng
Thư mục src/assets
- Thư mục này chứa các tài nguyên tĩnh như ảnh, fonts, hoặc styles toàn cục.
Thư mục src/components
- Chứa các thành phần Vue, có thể được tổ chức thành các thư mục con hoặc thư mục theo tính năng.
App.vue
- Root component
main.ts
- Điểm vảo (entrypoint) của ứng dụng
index.html
- Đóng vai trò là trang HTML mà trình duyệt web sẽ tải lên khi người dùng truy cập ứng dụng.
package.json
- Chứa thông tin về dự án, các thư viện, scripts để chạy các tác vụ.
tsconfig.json
- Cấu hình cho TypeScript
vite.config.ts
- Cấu hình build với Vite
Tổng kết
Bài tiếp theo chúng ta sẽ bắt đầu học những concept cơ bản của vue 3 và xây dựng một ứng dung TODO MVC bằng vue 3. Hi vọng qua bài viết này bạn sẽ có cái nhìn tổng quan về vue 3, chúc bạn một ngày tốt lành.