RIOT.JS-環境設定
RIOTjsを使用する方法は2つあります。
Local Installation − RIOTライブラリをローカルマシンにダウンロードして、HTMLコードに含めることができます。
CDN Based Version − RIOTライブラリをコンテンツ配信ネットワーク(CDN)から直接HTMLコードに含めることができます。
ローカルインストール
に移動します https://riot.js.org/download/ 利用可能な最新バージョンをダウンロードします。
今すぐダウンロードしてください riot.min.js / riotjsなど、Webサイトのディレクトリにあるファイル。
例
これで、次のように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ベースのバージョン
コンテンツ配信ネットワーク(CDN)から直接、RIOTjsライブラリをHTMLコードに含めることができます。GoogleとMicrosoftは、最新バージョンのコンテンツ配信を提供しています。
Note −このチュートリアルでは、CDNJSバージョンのライブラリを使用しています。
例
CDNJSのjQueryライブラリを使用して上記の例を書き直してみましょう。
<!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>
これにより、次の結果が生成されます-