GALAXY TECH
Chuyên gia Công nghệ
Thứ hai, 16/04/2018 | 00:00 GMT+7

Bắt đầu với kết xuất phía server bằng Nuxt.js

Nuxt.js là một khung công tác mạnh mẽ và đơn giản được xây dựng để tạo các ứng dụng phổ biến, được hiển thị phía server bằng cách sử dụng Vue.js. Nó đã được mệt mỏi bởi Next ; Khung kết xuất phía server (SSR) của React. Nuxt được tạo ra bởi Alex & Sébastien Chopin và đã thu hút được rất nhiều sự chú ý vào năm 2017. Nhiều đến mức Anh em nhà Chopin đã trở thành những người truyền bá cho kết xuất phía server nói chung trong cộng đồng Vue.js, phát biểu tại VueConf 2018 và Vue. js Amsterdam về kết xuất phía server , cụ thể là.

Nuxt và kết xuất phía server có thể được coi là công nghệ riêng biệt của riêng nó và cả một cuốn sách có thể được dành riêng cho chúng. Bài viết này là tổng quan ngắn gọn về Nuxt.js để bạn có thể hiểu rõ hơn về nó và kết xuất phía server nói chung.

Tại sao phải hiển thị phía server ?

Điều đó thật tuyệt và tất cả nhưng, kết xuất phía server (SSR) là gì và tại sao bạn nên quan tâm? Chà, có một vấn đề lớn với các ứng dụng trang đơn: nhiều công cụ tìm kiếm không thể thu thập thông tin ứng dụng của bạn như dự định…. Đây là một vấn đề lớn nếu SEO cần đóng một phần rất lớn cho sự thành công của ứng dụng của bạn. Đúng là thuật toán của Google đã được cập nhật trong những năm gần đây để xử lý tốt hơn những trải nghiệm mới này nhưng nó không hoàn toàn hoàn hảo. Ngoài ra, kết xuất phía server cũng nhanh hơn và cải thiện hiệu suất, điều này cũng quan trọng đối với SEO ứng dụng của bạn.

[T] đây là một vấn đề lớn với các ứng dụng trang đơn: nhiều công cụ tìm kiếm không thể thu thập thông tin ứng dụng của bạn như dự định…. Đây là một vấn đề lớn nếu SEO là một phần quan trọng trong quá trình phát triển ứng dụng của bạn.

Cài đặt Nuxt.js

Thật dễ dàng để cài đặt và chạy với Nuxt. Tất cả những gì bạn cần để bắt đầu là Vue CLI . Nếu bạn đã sử dụng Vue CLI trước đây, thì các lệnh và kiến trúc Nuxt sẽ rất quen thuộc với bạn. Nếu bạn chưa cài đặt CLI, bạn có thể thực hiện dễ dàng với $ npm install vue-cli . Sau khi cài đặt, hãy khởi tạo ứng dụng với mẫu Nuxt starter bằng các lệnh sau:

$ vue init nuxt-community/starter-template <project-name>
$ cd <project-name>
$ npm install

# Launch the project
$ npm run dev

Bạn sẽ thấy biểu trưng hoạt hình của Nuxt trong trình duyệt của bạn cùng với tiêu đề và mô tả của ứng dụng mà bạn đã xác định với cài đặt CLI.

Kiến trúc của Nuxt

Cũng giống như các lệnh CLI, kiến trúc của Nuxt tương tự như Vue.js 2, ngoại trừ một số thứ như các pages , middleware , plugins và folder layouts . Tất cả các file này hoạt động giống như bạn mong đợi trong ứng dụng Vue truyền thống. Nếu tại bất kỳ thời điểm nào trong cuộc phiêu lưu Nuxt, bạn cảm thấy bị lạc lõng, cộng đồng Nuxt đã thêm các file README.md tuyệt vời vào mỗi folder với các liên kết đến tài liệu.

Thư mục bố cục

Thư mục layouts xác định tất cả các bố cục khác nhau mà ứng dụng của bạn có thể sử dụng. Đây là một nơi tuyệt vời để thêm các thành phần chung chung được sử dụng trên ứng dụng của bạn như đầu trang và chân trang để làm ví dụ. Bạn nên bao gồm các thành phần trong file này mà bạn không muốn xác định lại cho mỗi trang mới nhiều lần.

Nếu bạn đã quen thuộc với WordPress, bố cục có thể được so sánh với các mẫu trang trong WordPress. Theo mặc định, mẫu mặc định được sử dụng cho các file .vue trong folder pages là default.vue . Phần tử <nuxt/> là cần thiết để đưa vào tất cả các thành phần, văn bản, nội dung và dữ liệu của trang.

Tạo một bố cục mới

Để tạo một bố cục Nuxt mới, cũng dễ dàng như tạo một file .vue mới. Ví dụ: nếu bạn muốn tạo một bố cục blog, bạn có thể tạo một bố cục mới bằng cách thêm file blog.vue vào folder layouts . Từ đó, bạn có thể thêm bất kỳ thành phần cụ thể nào của blog mà bạn có và thậm chí bao gồm những thứ như props hoặc dữ liệu từ cửa hàng Vuex của bạn.

Hãy nhớ bao gồm <nuxt/> trong bố cục của bạn.

Thư mục trang

Thư mục pages khá phức tạp. Với Nuxt, không có file bộ định tuyến. Thay vào đó, Nuxt sẽ tạo một tuyến mới cho mỗi file .vue mới trong folder pages . Bạn thậm chí có thể có các tuyến đường động bằng cách thêm dấu gạch dưới ( _ ) vào folder hoặc file .vue .

Ví dụ:

|__ pages/
   |__ users/
      |__ _id.vue

Sẽ tạo ra…

router: {
  routes: [
    {
      name: 'users-id',
      path: '/users/:id?',
      component: 'pages/users/_id.vue'
    },
  ]
}

Theo mặc định, mọi file trong folder này sử dụng bố cục default.vue từ folder layouts . Tuy nhiên, bạn có thể dễ dàng thay đổi điều này thành một bố cục khác mà bạn có thể đã tạo bằng cách thêm thuộc tính layout .

<script>
export default {
  layout: 'blog'
}
</script>

Tất nhiên, có một số thuộc tính khác mà bạn có thể thêm vào các trang Nuxt.

Thư mục phần mềm trung gian

Thư mục phần mềm trung gian chứa tất cả phần mềm trung gian; một tập hợp các chức năng tùy chỉnh được chạy trước khi một trang mà bố cục của ta được hiển thị.

Một ví dụ thực tế về phần mềm trung gian sẽ xác thực user mỗi khi tải một trang có dữ liệu an toàn. Nói cách khác, Mỗi khi user truy cập vào một tuyến đường yêu cầu xác thực, một chức năng phần mềm trung gian tùy chỉnh sẽ chạy, trả về một boolean tùy theo việc user có đăng nhập hay không. Nếu không, hãy định tuyến chúng đến a /login route để user có thể đăng nhập và quay lại trang đó.

Thư mục plugin

Thư mục plugins được sử dụng để thêm các plugin JavaScript mà bạn muốn tải trước khi chạy ứng dụng Vue root . Thư mục này ít nhiều là nơi lưu trữ các file plugin, chẳng hạn như vue-notifications . Ví dụ dưới đây là từ tài liệu Nuxt .

Nếu ta muốn hiển thị thông báo trong ứng dụng của bạn , ta cần phải kích hoạt nó trước khi ứng dụng được hiển thị.

plugins / vue-notification.js
import Vue from 'vue'
import VueNotifications from 'vue-notifications'

Vue.use(VueNotifications)
nuxt.config.js
module.exports = {
  plugins: ['~/plugins/vue-notifications']
}

Hoạt ảnh trang và thanh tải

Một trong những điều yêu thích của tôi về Nuxt là hỗ trợ hoạt hình ngay lập tức! Bạn có thể dễ dàng tạo hoạt ảnh trong và ngoài các trang bằng cách sử dụng một vài lớp CSS tích hợp sẵn. Hoạt ảnh giữa các trang có thể làm cho ứng dụng của bạn cảm thấy trôi chảy và mount . Nếu bạn muốn trang mờ dần lên và mờ dần giữa các tuyến, bạn có thể làm như sau:

.page-enter-active,
.page-leave-active {
  opacity: 1;
  transition: opacity .25s;
  animation-duration: .3s;
  animation-fill-mode: both;
}

.page-enter-active {
  animation-name: pageFadeInUp;
}

.page-leave-active {
  animation-name: pageFadeOutDown;
}

.page-enter, .page-leave-to {
  opacity: 0;
}


@-webkit-keyframes pageFadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 1.25%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@-webkit-keyframes pageFadeOutDown {
  0% {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(0, 1.25%, 0);
  }
}

Thay đổi màu thanh tải

Để thay đổi màu của thanh tải, hãy sửa đổi CSS trong đối tượng loading bên trong file nuxt.config.js .

nuxt.config.js
loading: { color: '#3B8070' },

Tắt SSR cho một thành phần

Đôi khi bạn không muốn một trang hoặc thành phần hiển thị ở phía server vì một trong nhiều lý do. Nuxt làm cho điều này rất dễ dàng. Nếu bạn muốn hiển thị một thành phần ở phía client , chỉ cần thêm <no-ssr> .

<template>
...
  <no-ssr>
    <some-component />
  </no-ssr>
...
</template>

Kết luận

Như bạn thấy , có rất nhiều điều cần đề cập với Nuxt nhưng hy vọng bây giờ bạn đã hiểu chung về cách Nuxt hoạt động, tại sao nó lại quan trọng và cách bạn có thể xây dựng ứng dụng web tiếp theo của bạn bằng Nuxt.

Nếu bạn đang tìm kiếm thêm thông tin về nó, Nuxt có tài liệu tuyệt vời với rất nhiều ví dụ cũng như chính mẫu dành cho người mới bắt đầu cộng đồng. Như đã đề cập trước đây, cộng đồng tuyệt vời đã thêm các file README.md vào mỗi folder với thông tin bổ sung và liên kết đến tài liệu cụ thể cho folder đó.

Tags:

Các tin liên quan

Cách bảo vệ server của bạn trước lỗ hổng Meltdown và Spectre
2018-01-10
Sơ lược về lịch sử Linux
2017-10-27
Cách thiết lập Shiny Server trên Ubuntu 16.04
2017-10-25
Cách thiết lập server lưu trữ đối tượng bằng Minio trên Ubuntu 16.04
2017-08-30
Cách chạy server MongoDB an toàn với OpenVPN và Docker trên Ubuntu 16.04
2017-03-24
Kết xuất phía server cơ bản với Vue.js và Express
2017-03-14
Cách thiết lập server VPN IKEv2 với StrongSwan trên Ubuntu 16.04
2017-02-17
Cách cấu hình firewall Linux cho Docker Swarm trên CentOS 7
2017-01-11
Cách cấu hình firewall Linux cho Docker Swarm trên Ubuntu 16.04
2017-01-09
Cách cài đặt Linux, Nginx, MySQL, PHP (LEMP Stack) trên Debian 8
2016-12-20