Учебники

RIOT.JS — Настройка среды

Июль 19, 2018

Есть два способа использовать RIOT JS.

  • Локальная установка — вы можете загрузить библиотеку RIOT на свой локальный компьютер и включить ее в свой HTML-код.

  • Версия на основе CDN. Вы можете включить библиотеку RIOT в свой HTML-код непосредственно из сети доставки контента (CDN).

Локальная установка — вы можете загрузить библиотеку RIOT на свой локальный компьютер и включить ее в свой HTML-код.

Версия на основе CDN. Вы можете включить библиотеку RIOT в свой HTML-код непосредственно из сети доставки контента (CDN).

Локальная установка

  • Перейдите на https://riot.js.org/download/, чтобы загрузить последнюю доступную версию.

  • Теперь поместите загруженный файл riot.min.js в каталог вашего сайта, например, / riotjs.

Перейдите на https://riot.js.org/download/, чтобы загрузить последнюю доступную версию.

Теперь поместите загруженный файл riot.min.js в каталог вашего сайта, например, / riotjs.

пример

Теперь вы можете включить библиотеку riotjs в ваш HTML-файл следующим образом: 

<!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>

Это даст следующий результат —

CDN основанная версия

Вы можете включить библиотеку RIOT js в свой HTML-код непосредственно из сети доставки контента (CDN). Google и Microsoft обеспечивают доставку контента для последней версии.

Примечание. В этом руководстве мы используем версию библиотеки CDNJS.

пример

Теперь давайте перепишем приведенный выше пример, используя библиотеку jQuery из 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>

Это даст следующий результат —

45
Share: