RIOT.JS - การตั้งค่าสภาพแวดล้อม

มีสองวิธีในการใช้ RIOT js

Local Installation - คุณสามารถดาวน์โหลดคลัง RIOT บนเครื่องของคุณและรวมไว้ในโค้ด HTML ของคุณ
CDN Based Version - คุณสามารถรวมไลบรารี RIOT ลงในโค้ด HTML ของคุณได้โดยตรงจาก Content Delivery Network (CDN)

การติดตั้งภายในเครื่อง

ไปที่ไฟล์ 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 ของคุณได้โดยตรงจาก Content Delivery Network (CDN) Google และ Microsoft นำเสนอเนื้อหาสำหรับเวอร์ชันล่าสุด

Note - เราใช้ไลบรารีเวอร์ชัน 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>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -