00.cssフレームワークbulma用テンプレート:elm0.19でbulmaを利用する

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

--- 00.cssフレームワークbulma用テンプレート:elm0.19でbulmaを利用する [2019/03/27] – adash333
+++ 00.cssフレームワークbulma用テンプレート:elm0.19でbulmaを利用する [2019/05/04] (現在) – [src/Main.elmをmain.jsにコンパイルしてindex.htmlに読み込む] adash333
@@ 行 16: / 行 16: @@
 create-elm-appでbulmaとfontawesome5を試してみる
 年3月28日
+ほとんど同じですが、もう少し簡単な方法を以下に記載させていただきました。
+===== 開発環境 =====
+Windows 10 Pro
+Chrome
+VisualStudioCode 1.32.3
+git version 2.20.1.windows.1
+nvm 1.1.7
+node 10.2.0
+npm 6.4.1
+elm 0.19.0
+elm-format 0.8.1
+VisualStudioCodeの拡張機能でelmをインストールして、settings.jsonに以下のようにelmを設定
+<code>
+    "[elm]": {
+        "editor.formatOnSave": true
+    },
+</code>
+===== src/Main.elmをmain.jsにコンパイルしてindex.htmlに読み込む =====
+元のソースコードは、https://superhahnah.com/elm-flags/ を写経させていただきました。
+詳細は以下をご覧ください：http://i-doctor.sakura.ne.jp/font/?p=37457
+おおまかな流れ
+  -アプリ作成用フォルダを作成（例：C:/elm/elm-flag/）
+  -"%%elm init%%"でelm.jsonを作成
+  -index.htmlの作成(ここにbulmaとFontAwesome5を読み込む)
+  -src/Main.elmの作成
+  -"%%elm make src/Main.elm --output=main.js%%"でsrc/Main.elmをmain.jsにコンパイル
+  -index.htmlをChromeで開く。
+index.htmlとsrc/Main.elm
+<html>
+<script src="https://gist.github.com/adash333/d85ae4f075cfc387a8f2febe05b0f75a.js"></script>
+</html>
+{{:00.cssフレームワークbulma用テンプレート:pasted:20190504-143930.png}}
+DEMOサイト：https://adash333.github.io/elm-bulma-flag/
+===== リンク =====

00.cssフレームワークbulma用テンプレート/elm0.19でbulmaを利用する.1553721159.txt.gz · 最終更新: 2019/03/27 by adash333