RIOT.JS - Thiết lập môi trường

Có hai cách để sử dụng RIOT js.

  • Local Installation - Bạn có thể tải xuống thư viện RIOT trên máy cục bộ của mình và đưa nó vào mã HTML của bạn.

  • CDN Based Version - Bạn có thể đưa thư viện RIOT vào mã HTML của mình trực tiếp từ Mạng Phân phối Nội dung (CDN).

Cài đặt cục bộ

  • Đi đến https://riot.js.org/download/ để tải xuống phiên bản mới nhất có sẵn.

  • Bây giờ đặt tải xuống riot.min.js tập tin trong một thư mục của trang web của bạn, ví dụ: / riotjs.

Thí dụ

Bây giờ bạn có thể bao gồm thư viện riotjs trong tệp HTML của mình như sau:

<!DOCTYPE html>
<html>
   <head>
      <script src = "/riotjs/riot.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <messageTag></messageTag>
      <script>
         var tagHtml = "<h1>Hello World!</h1>";
         riot.tag("messageTag", tagHtml);
         riot.mount("messageTag");
      </script>
   </body>
</html>

Điều này sẽ tạo ra kết quả sau:

Phiên bản dựa trên CDN

Bạn có thể bao gồm thư viện RIOT js vào mã HTML của mình trực tiếp từ Mạng phân phối nội dung (CDN). Google và Microsoft cung cấp nội dung cung cấp cho phiên bản mới nhất.

Note - Chúng tôi đang sử dụng phiên bản CDNJS của thư viện trong suốt hướng dẫn này.

Thí dụ

Bây giờ chúng ta hãy viết lại ví dụ trên bằng thư viện jQuery từ CDNJS.

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <messageTag></messageTag>
      <script>
         var tagHtml = "<h1>Hello World!</h1>";
         riot.tag("messageTag", tagHtml);
         riot.mount("messageTag");
      </script>
   </body>
</html>

Điều này sẽ tạo ra kết quả sau: