Nuxt js là gì

admin - 09/04/2022 202

1. NuxtJs là gì ?

Là một framework của Vuejs được sử dụng để thành lập phần đông áp dụng từ bỏ Vuejs.Cho phnghiền chế tác Universal Vue Apps.Có thể điều khiển xe trên hệ thống lẫn client.

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

2. Tính năng nổi bật

Cấu trúc thỏng mục rõ ràngServer-Side Rendering (SSR): toàn cục dữ liệu xử trí bên trên hệ thống, rồi trường đoản cú hệ thống trả tài liệu về client hiển thị.Client Side Rendering (CSR): phần lớn đa số giải pháp xử lý bên trên client.Viết code trên các tệp tin .vueChia website ra thành nhiều trang, mỗi trang là một file riêng rẽ.Chia layouts, components, plugins ... góp code dễ duy trì và tái sử dụng.

3. Xây dựng vận dụng Demo

Các chúng ta cũng có thể thiết đặt qua npx:

npx create-nuxt-app Hoặc có thể áp dụng yarn:

yarn create nuxt-ứng dụng Trong quy trình setup đã hiển thị một số đọc tin như là: name project, programing language, package manager, ... đã cung ứng đến dự án công trình của người tiêu dùng nhanh hao cùng dễ ợt rộng trong quá trình làm cho.

Tiếp mang lại mong mỏi chạy được project của chúng ta thì run :

cd name-projectnpm run dev hoặc yarn devMặc định project đã chạy localhost:3000

4. Cấu trúc tlỗi mục

Sau Lúc setup xong xuôi thì project ta tất cả có sẵn các folder sau :

Package.json:Là vị trí đựng những dependencies với scripts.

Xem thêm: Đã Sửa Lỗi Ứng Dụng Searchprotocolhost, Sửa Lỗi Ứng Dụng Searchprotocolhost

5. Routing

Nuxt.js tự động hóa thông số kỹ thuật vue-router vào thỏng mục Pages.Được điều phối các trang trải qua nuxt-link

Home pageBasic Routeví dụ như, cấu tạo tlỗi mục page đang là:

pages/--| user/----| index.vue----| one.vue--| index.vueThì nuxt sẽ auto tạo nên file config route như vậy này:

router: routes: < name:: 'index', path: '/', component: 'pages/index.vue' , name:: 'user', path: '/user', component: 'pages/user/index.vue' , name:: 'user-one', path: '/user/one', component: 'pages/user/one.vue' >Tgiỏi bởi vì mình cần tạo thành tệp tin config mang lại route thì sống nuxt chúng ta chỉ việc chế tạo cây thỏng mục trong thư mục pages.

Dynamic Routes

Để xác định tuyến phố cồn với cùng một tđắm đuối số, bạn phải khẳng định tệp .vue HOẶC một thư mục gồm chi phí tố gạch men bên dưới " _ ".

Xem thêm: Rel Là Gì ? Rel Trong Html Có Nghĩa Là Gì

pages/--| _slug/----| category.vue----| index.vue--| users----| _id.vue--| index.vueThì nó vẫn auto generate nlỗi sau:

routers: routes: < name: 'index', path: '/' component: '/' , name: 'user-id', path: '/users/:id' component: 'pages/users/_id.vue' , name: 'slug', path: '/:slug', component: 'pages/_slug/index.vue' , name: 'slug-category' path: '/:slug/category', component: 'pages/_slug/category.vue' >Nested RoutesNuxt.js cho phép họ tạo nên các router lồng nhau.

Nếu bạn có nhu cầu định nghĩa component phụ vương mà bạn cần tạo ra 1 file .vue tương đương với tên thỏng mục mà đựng những view nhỏ.lấy ví dụ như cấu tạo cây thư mục :

pages/--| users/----| _id.vue----| index.vue--| users.vueNó đang tự động generate nlỗi này:

routers: routes: < path: 'users', component: 'pages/users.vue', children: < name: 'users', path: '', component: 'pages/users/index.vue' , name: 'users-id', path: ':id', component: 'pages/users/_id.vue' > >