Bài 1: Hướng dẫn set up tạo một project Vue.js từ đầu
Xin chào các bạn, ở bài viết này mình sẽ hướng dẫn các bạn cách set up một project Vue.js từ đầu một cách cơ bản nhất.
Trong blog lần trước, chúng ta sử dụng Vue.js bằng cách nhúng mã Js vào file HTML. Đó là cách làm xưa cũ thời Jquery còn là bá chủ thị trường, bây giờ mọi thứ đã khác, các trang web mới đều được xây dựng theo hướng “component-based”, vì thế chúng ta sẽ bắt đầu một project bằng Vue-cli.
Nội dung của bài
Cài đặt Vue-cli
Cài đặt:
npm install -g @vue/cli
# hoặc
yarn global add @vue/cli
Để tạo project mới:
vue create my-project
# hoặc
vue ui
Sau khi gõ câu lệnh bên trên, sẽ có nhiều option hiện ra để ta lựa chọn:
Vue-cli hỗ trợ rất đa dạng các tính năng có thể cài đặt luôn đi kèm ngoài 2 mục Default cho Vue 2 và Vue 3.
Ta có thể cài đặt luôn TypeScript, PWA, Router, Vuex, SCSS/SASS, Unit Testing,… trong phần Manually select features mà không cần lo phải set up chúng như nào. Quá tiện lợi!
Cấu trúc project
Cấu trúc project bao gồm các mục cơ bản:
- node_modules: nơi chứa các thư viện được khai báo trong package.json
- public: chứa file index.html của trang web, nơi các thành phần Vue.js được tích hợp (Single Page chính là file này =)) )
- src: nơi chứa đoạn mã Vue.js của chúng ta, các đoạn mã Vue.js được xây dựng dưới đuôi .vue mà mình sẽ trình bày cụ thể cấu trúc của nó bên dưới
Các components được bỏ vào trong App.vue và App.vue được đưa vào index.html
Cấu trúc một file .vue
Một file .vue bao gồm 3 phần chính:
- template: nơi viết đoạn mã HTML cho component
- script: nơi xử lý các logic
- style: nơi viết đoạn mã CSS cho component
Và khi component của bạn đã hoàn thiện, ta có thể dùng nó ở bất kì đâu, bất kì lúc nào, bằng câu lệnh import:
Trên đây là những gì chúng ta cần để xây dựng một project từ đầu, cũng như tìm hiểu cấu trúc bên trong của một component trong Vue.js. Sau khi cài đặt xong, ta chỉ việc gõ npm run serve hoặc yarn serve để chạy thôi.
Một lưu ý là máy các bạn phải cài sẵn Nodejs trước nhé!
Hẹn gặp lại.