Nuxt JS là gì
Xin chào mọi người. Ngoài việc thân thiện với người sử dụng, giúp người dụng thao tác dễ dàng hơn hay mang lại trải nghiệm tốt nhất, tốc độ tải nhanh cho trang, thì chắc hẳn việc quảng bá trang Web của mình tiếp cận tới nhiều người dùng, đưa trang Web của mình có thể SEO dễ dàng trên Google là một điều mà mọi người đều rất mong muốn. Hiện nay chúng ta có rất nhiều công cụ, framwork để giúp lập trình viên có thể dễ dàng làm điều đó. Với những ai đang dùng Vue.js để phát triển giao diện cho website của mình thì – Nuxt.js là một framework không thể bỏ qua. Mục Lục
Để cài đặt, khởi tạo một project Nuxt.js chúng ta cần :
Chúng ta có thể cài đặt thông qua: yarn, npm hoặc npx. Ở đây mình sẽ cài đặt thông qua npm là package manager phổ biến nhất hiện nay thông qua câu lệnh :
Chọn tên project, Ngôn ngữ sử dụng: chúng ta có thể dùng Nuxt với Javscript hoặc TypeScript. Mình sử dụng Javascript, npm và thêm giao diện của Element cđể init project. Cuối cùng chúng ta chạy lệnh để chạy ứng dụng trên môi trường development :
Kết quả: 3. Cấu trúc folder, middleware trong NuxtCấu trúc mặc định khi khởi tạo ứng dụng Nuxt.js sẽ bao gồm các folder như hình trên. Về cơ bản bao gồm: pages, components, static, store, plugins, và 2 file quan trọng là nuxt.config.js và package.json. pages:Thư mục pages bao gồm các views của ứng dụng và Nuxt.js sẽ đọc tất cả các file 0 nó sẽ tương ứng với đường link có path: 1 tức là ngay trang chủ.Ngoài ra chúng ta có thể thêm thư mục và bên trong thư mục sẽ có thư mục con như vậy tương ứng với các level của đường dẫn url : 2 và 3.vue sẽ tương ứng với url có path: 4 và 5. Ở đây chúng ta thấy điều đặc biệt là chúng ta có thể truyền biết vào một components 6 biến này sẽ được lấy thông qua url path 7. Chi tiết về phần này mọi người hãy đọc thêm tại trang chủ của nuxt.js nhé !components:Thư mục components là nơi đặt tất cả các components cho ứng dụng. Để import chúng vào các pages. Components giúp chia các phần tách biệt của pages và giúp tái sử dụng lại cho các pages khác nhau. static:Thư mục static sẽ được ánh xạ tới thư mục gốc của server và những file trong này sẽ không bị thay đổi. Tất cả tệp tin trong đây sẽ có thể truy cập thông qua đường dẫn gốc của dự án. Ví dụ chúng ta có logo của dự án sẽ nằm ở thư mục này : 8 và nó sẽ có thể truy cập thông qua đường dẫn : 9.store:Đây là nơi lưu store của Vuex. Toàn bộ các state, actions hay mutations VueX đều nằm trong thư mục này. Nếu cần dùng tới VueX. Hãy tới thư mục này và tạo một file index.js để kích hoạt store trong Nuxt.js Tệp tin nuxt.config.js :Đây là tệp tin giúp chúng ta cấu hình cho ứng dụng Nuxt.js. THêm modules, ghi đè những cài đặt mặc định, cấu hình nơi lưu biến môi trường 0, cấu hình thêm 1 , router, các trình biên dịch file sass, scss … và còn nhiều cấu hình khác đều cần cài đặt ở trong file này.package.json:Như mọi ứng dụng dùng node khác . chúng ta có file package.json nơi lưu lại những dependencies và các đoạn scripts giúp tự động chạy hay build ứng dụng. Ngoài ra như mình nói ở trên khi ứng dụng lớn hơn và sử dụng tới SSR. Chúng ta có thể thêm vào những thư mục khác như: layouts, middleware, modules … layouts:Đây là thư mục chứa những layouts dùng chung của ứng dụng. Ví dụ bạn có trang cho khách public và trang admin. Hai trang này sẽ có layout khác nhau vì thế chúng ta có thể tạo một layout 2 và 3 Mặc định Nuxt.js sẽ nhận layout 2 khi chúng ta không khai báo layouts cho pages. Để sử dụng layouts, chúng ta có thể khai báo ngay trong thẻ script của Vue
Ngoài ra chúng ta có thể custom lại trang lỗi cho ứng dụng thay vì trang lỗi mặc định của nuxt bằng cách thêm layouts/error.vue và custom. middlewareThư mục 5 bao gồm middleware sử dụng trong ứng dụng. Middleware sẽ định nghĩa các hàm để chạy trước khi render page hoặc layout.Tất cả middleware dùng chung có thể đặt ngay trong thư mục này. Tên của tệp tin middleware cũng chính là tên middleware: Ví dụ 6 thì chúng ta có thể dùng chúng với tên 7.. Middleware sẽ nhận tham số đầu tiên là 8
8 là một 0 sẽ bao gồm : app, store, route, params, query, env, isDev, isHMR, redirect, error, $config. Các bạn có thể xem thêm tại đâyMiddleware ở Nuxt có 3 cách dùng:
Sau đấy chúng ta cần config trong file nuxt.config.js
Khai báo trong các page mà yêu cầu đăng nhập :
4. Kết bàiBài viết hôm nay của mình không dài cũng không ngắn. Tuy nhiên đây là những thứ cơ bản nhất với NuxtJS, để bắt đầu với một Framework chúng ta cần biết rõ từng folder hay file của chúng sử dụng với mục đích gì. Rất mong bài viết có thể giúp ích cho mọi nguời để tiếp cận với NuxtJS. Nếu các bạn cần làm một website SSR hay đến với NuxtJS. Bài sau mình sẽ viết thêm về Nuxt Lifecycle . Cảm ơn mọi người đã theo dõi bài viết, thấy hay và bổ ích thì upvote cho mình nhé. Hẹn gặp lại mọi người trong bài viết sau. |