Tìm hiểu về Nuxtjs

JS Feb 03, 2021
  • Nuxt.js là một framework js để tạo các ứng dụng Universal Vue.js
  • Là một framework, Nuxt.js có rất nhiều  tính năng giúp bạn phát triển giữa phía client và server như Dữ liệu bất đồng bộ (Asynchronous Data), Middleware, Layouts, v.v.
  1. Tổng quan về nuxtjs

Nuxt.js là một framework sử dụng để xây dựng các ứng dụng từ Vue.js, được ra đời vào 25/10/2016 bởi zeit.co. Hiện này thì phiên bản mới nhất của Nuxt.js là v2.14.12.  Một số thông tin về Nuxt.js tại Github about Nuxt.js hoặc tại trang chủ của Nuxt.js.

Nuxt.js được cài đặt bao gồm một số thư viện sau:

Các tính năng của Nuxt.js:

  • Tạo ra file .vue (làm việc với vue)
  • Automatic Code Splitting
  • Server-Side Rendering
  • Hệ thống router và dữ liệu bất đồng bộ
  • Static File Serving
  • Hỗ trợ ES6/ES7
  • Đóng gói và nén js, css
  • Quản lý các thẻ ở phần head (vue-meta)
  • Hot reloading in Development
  • Pre-processor: SASS, LESS, Stylus, etc

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

Do có liên quan đến server, nên để cài đặt Nuxtjs, ta phải dùng npm, so với Vuejs còn có thể cài bằng import script tag từ CDN hay download script
  • Cấu trúc thư mục:

Sau khi khởi tạo project thành công thì sử dụng câu lệnh npm run dev để chạy project và  truy cập thông qua đường dẫn http://localhost:3000.

3. Sơ đồ làm việc và ý nghĩa cấu trúc

Sơ đồ làm việc: Khi có request đến server hoặc khi user bấm vào link thông qua <nuxt-link> thì nuxt.js sẽ hoạt động theo sơ đồ sau:

Ý nghĩa cấu trúc:

  • Thư mục Assets Chứa những tài nguyên chưa được biên dịch như là LESS, SASS, hay JavaScript.
  • Thư mục Components Chứa các components của vue.js.
  • Thư mục Layouts Chứa các layout (giao diện) cho ứng dụng.
  • Thư mục Middleware Chức Middleware của ứng dụng, middleware cho phép định nghĩa các function được chạy trước khi render 1 page hoặc nhóm page.
  • Thư mục Pages Thư mục này chứa các view của ứng dụng cũng như định nghĩa routes cho ứng dụng luôn.
  • Thư mục Plugins Chức các javascript plugins.
  • Thư mục Static: Chứa các file tĩnh như các file ảnh chẳng hạn, được map tự động, ví dụ file /static/logo.png sẽ là yoursite/logo.png
  • Thư mục Store Chứa các file của Vuex Store
  • File nuxt.config.js Chứa các cấu hình được thiết đặt cho ứng dụng.
  • File package.json: chứa các dependencies và scripts.

4. Tài liệu tham khảo

Nuxt.js - The Intuitive Vue Framework
Build your next Vue.js application with confidence using NuxtJS. An open source framework making web development simple and powerful.
nuxt/nuxt.js
The Intuitive Vue Framework. Contribute to nuxt/nuxt.js development by creating an account on GitHub.

Tags

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.