NUXT JS LÀ GÌ

     

Nếu bạn đàng ban đầu tìm gọi hoặc đã từng có thời gian thao tác làm việc với javascript thì chắc rằng những cái thương hiệu như Angular, Reactjs, Vuejs đã hết là mọi từ khoá mới lạ phải ko nào? Mình đã từng có thời gian thao tác làm việc với Vuejs, cũng tìm hiểu qua phần nhiều framework javascript khác và mình nghĩ ai ai cũng có thể thuận tiện nhận ra chúng số đông là đông đảo framework làm cho Client Side Render(CSR). Tuy nhiên, trong nhiều phần dự án thực tiễn thì sẽ phải áp dụng Server Side Render(SSR) những hơn. Vậy gồm một cái nào đó tương từ bỏ như Vuejs hay** Reactjs** nhưng hỗ trợ SSR không. Câu vấn đáp là có. 2 framework new đã thành lập ngay tiếp đến là Nextjs(Dùng cho Reactjs) cùng Nuxtjs(Dành cho Vuejs) để thỏa mãn nhu cầu được nhu cầu thực tiễn. Trong nội dung bài viết này mình vẫn cùng các bạn tìm đọc cơ phiên bản chút về Nuxtjs xem gồm gì new không nhé. Chắc rằng sẽ có chúng ta tự hỏi vì sao mình lại chọn Nuxtjs mà không phải Nextjs sau lời mở đầu. Cơ bản là vị mình hiện nay đang làm việc với Vuejs bắt buộc sẽ tìm hiểu Nuxtjs trước vẫn :D.

Bạn đang xem: Nuxt js là gì

Nội dung

Tìm đọc về Nuxtjs

1. Tổng quan lại về Nuxt.js:

Nuxt.js được mua đặt gồm một số tủ sách sau:

Tổng dung tích sau khi thiết lập tất cả số đông gói trên chỉ gồm 60kB(nếu không có có Vuex thì chỉ còn 57KB), rất kì nhỏ gọn buộc phải không nào!

2. Khởi tạo và cấu trúc thư mục của một project nuxtjs:

Để khởi sinh sản một project nuxt, bọn họ sử dụng create-nuxt-app:


# thực hiện npx (npx được thiết lập kèm với NPM từ phiên phiên bản 5.2.0)$ npx create-nuxt-app project-name> # hoặc sử dụng yarn$ yarn create nuxt-app project-name>
Trong quá trình khởi chế tạo ra project, bạn sẽ phải khai báo một số thông tin như thể tên, UI framework (Ant Design, Bootstrap, Element, ...), ... Mang lại project của bạn.!

*

3. Một số chức năng cơ bản cần chú ý

Routing: như đang nói tại đoạn 1, Nuxt.js đã bao gồm vue-router nên nó sẽ auto sinh ra các router dựa trên cấu trúc thư mục pages trong project. Tức là bạn sẽ không cần phải khai báo router mà chỉ cần đặt thương hiệu file, cấu tạo thư mục theo 1 quy tắc nhất quyết thì sẽ tự động hóa sinh ra router. Ví như sau:

Basic route:


router: routes: < name: 'index', path: '/', component: 'pages/index.vue' , name: 'users', path: '/users', component: 'pages/users/index.vue' , name: 'users-profile', path: '/users/profile', component: 'pages/users/profile.vue' >
Views:

Layout: layout là 1 trong khung bố cục tổng quan chung cho các trang tương tự nhau (ví dụ như những trang thuộc phần quản ngại trị của admin đã dùng phổ biến 1 layout). Để thực hiện layout cho một page, bạn chỉ việc khai báo


Còn vào trường hợp chúng ta không khai báo layout thì Nuxt.js sẽ tự sử dụng layout khoác định trên layouts/default.vue.

Xem thêm: Khôi Phục Hồi Dữ Liệu Sau Khi Cài Lại Win Có Mất Hết Dữ Liệu Không

Hãy nhớ sử dụng component trong layout để có thể load được văn bản của page nhé!


Pages: được đặt trong thư mục pages, Nuxt.js sẽ đọc tất cả các file .vue cùng dựa theo cấu tạo thư mục này nhằm sinh ra những route khớp ứng với những trang của bạn. Với ở vào page, Nuxt.js cung cấp thêm một trong những attributes và functions đặc biệt quan trọng để cung ứng cho công việc phát triển. Điển hình như:

Error Page: Ngoài những page hiển thị thông thường, Error Page khi gồm lỗi (404, 500) xảy ra cũng là một trong những phần cần chú ý để tạo ra dấu ấn riêng rẽ cho website của bạn.

Xem thêm: Sinh Năm 1990 Mệnh Gì? Bí Ẩn Phong Thủy Hợp Màu Gì

Vuex Store: Phần này mình hứa hẹn các bạn sẽ viết trong bài tới đây vì chẳng thể nói không còn trong 1,2 loại được.

Một số câu lệnh thường xuyên dùng:

Command

Description

nuxt dev

start project đương nhiên hot-reloading

nuxt build

build project với webpack và minify những file JS, CSS

nuxt export

sinh ra tệp tin HTML từ những route (sử dụng đến static hosting cho những phiên bạn dạng Nuxt >= 2.13)

nuxt generate

build project và sinh ra file HTML từ các route (sử dụng đến static hosting phiên phiên bản Nuxt >= 2.13)

Tổng kếtCảm ơn chúng ta đã dành thời gian đọc bài viết, nếu thấy nội dung bài viết hay cùng hữu ích, hãy share bài viết cho bằng hữu cùng đọc nhé, còn giả dụ có vấn đề gì bất cập (kiến thức, phương pháp diễn đạt, ...) thì nên comment góp ý xuống phía dưới để mình có thể nâng cao và viết được những bài viết chất lượng rộng nhé.Tài liệu tham khảo