Làm quen với Vue.js

By anh.le

Published in News

December 12, 2022

3 min read

1. Định nghĩa Vue.js:

Nếu bạn mới bắt đầu học lập trình front-end, thì Vue.js là một gợi ý không thể bỏ qua vì cách tiếp cận và sử dụng rất dễ dàng. Bài viết này mình xin giới thiệu về framework này. Vue.js được gọi tắt là Vue (được phát âm là /vjuː/, nó giống như từ view trong tiếng Anh). Vue.js là một thư viện của Javascript để xây dựng giao diện cho người dùng, nó hoạt động khá linh hoạt theo mô hình MVVM (Model View - View Model). Khi phát triển lớp giao diện (view layer), người dùng chỉ cần dùng thư viện lõi (core library) của Vue, vốn rất dễ dàng chọn và tích hợp với các thư viện khác hoặc các dự án hiện có. Cùng lúc đó, nếu kết hợp với những kĩ thuật hiện đại như SFC (single file components) và các thư viện hỗ trợ. Vue cũng đáp ứng được nhu cầu xây dựng ứng dụng một trang SPA (single-page applications) với độ phức tạp cao hơn nhiều.

2. Tại sao nên sử dụng Vue.js:

Khả năng tương tác với nhiều Framework có sẵn khác nhau đã khiến Vue trở nên rất phổ biến trong hệ sinh thái phát triển web. Mình sẽ nêu một số ưu điểm sau đây:

Dễ dàng học và áp dụng vào các dự án
Kho thư viện lớn, hỗ trợ xây dựng giao diện người nhanh chóng
Dung lượng tải thấp, giúp tốc độ tải trang nhanh hơn
Trang web nhẹ, tốc độ xử lý cực kỳ nhanh bởi được Render, xử lý bằng Javascript
Có khả năng xử lý các render thuộc server thành file Javascript tĩnh

Bên cạnh đó, Vue.js chỉ mang một nhược điểm duy nhất, đó là những website được tạo ra bởi framework này sẽ rất khó khăn khi thực hiện quá trình SEO (Search Engine Optimization)

3. Hướng dẫn cài đặt Vue.js và chạy chương trình thông qua NodeJS:

Trước khi cài đặt:

Để cài đặt được Vue.js trên máy cần cài đặt nodejs cho máy, dùng npm hoặc yarn (công cụ để quản lý các thư viện javascript cho nodejs). Để kiểm tra đã cài đặt chưa, bạn có thể dùng:

$ npm -v
# or
$ yarn -v

Cài Vue CLI: Vuejs cung cấp CLI (Command Line Interface) giúp nhanh chóng khởi tạo nền tảng (scaffolding) cho các ứng dụng một trang. Bạn có thể cài đặt thông qua npm hoặc là yarn

$ npm install -g @vue/cli @vue/cli-service-global
# or
$ yarn global add @vue/cli @vue/cli-service-global

Bạn có thể kiểm tra phiên bản với lệnh:

$ vue --version

Bạn cũng có thể update Vue CLI, qua câu lệnh:

$ npm update -g @vue/cli
# or
$ yarn global upgrade --latest @vue/cli

Tạo mới project:

Khởi tạo một ứng dụng vue, bạn cần một thư mục để chứa dự án, sẽ dùng lệnh:

vue create demo-project

Quá trình này Vue sẽ đưa ra các câu hỏi tùy chọn để giúp bạn khởi tạo phù hợp với những yêu cầu mà project của bạn mong muốn:
Sau khi khởi tạo, bạn sẽ tiến hành chạy project:

$ npm run dev
# or
$ yarn dev

Đợi project compile xong bạn sẽ truy cập vào http://localhost:8080 là đường dẫn mặc định của ứng dụng Vue. Nếu đã khởi tạo thành công project thì màn hình sẽ hiển thị giao diện như hình ở trên

4. Cấu trúc thư mục:

Dưới đây là nội dung của thư mục src của một dự án Vue.js:

node_modules: Đây là thư mục chứa tất cả các thư viện cần để xây dựng Vue.
public: Đây là thư mục chứa các static assets mà bạn không muốn chạy thông qua webpack
index.html: Với ứng dụng SPA (Single Page Application) thì có 1 trang duy nhất. Sau đó, nội dung của trang bị thay đổi mà không phải tải lại trang, thì đây chính là trang duy nhất đó.
src: Đây là thư mục chứa mã nguồn của dự án. Bên trong đó gồm các folder:
assets: Dùng để bất kỳ tài nguyên nào được nhập vào trong các components của bạn
components: Là thư mục chứa các UI components của dự án
locales: Để lưu trữ file ngôn ngữ dạng *.json (thường sử dụng Vue-i18n)
router: Là nơi sẽ viết các routes và kết nối chúng với Components
services: Là thư mục chứa các hàm call API
store (optional): Các hằng số Vuex trong các đột biến-type.js, các mô đun VueX trong các mô đun thư mục con (mà sau đó được nạp trong index.js).
utils: Chứa các hàm sử dụng chung trong một số components
views: Để dự án dễ dàng hơn, nên chia tách các thành phần được định tuyến và đặt chúng trong thư mục này.
App.vue: Đây là entry point component. Là file khởi tạo tất cả các component khác.
main.js: Entry point file để mount App.vue. Đây chính là file render ra App.vue component.

5. Kết luận:

Chúng ta đã vừa đi tìm hiểu về tổng thể của ứng dụng Vue với CLI. Hi vọng bài viết này giúp ích nhiều cho các bạn. Cảm ơn các bạn đã đọc bài viết của mình. Hẹn gặp các bạn ở các phần tiếp theo.