00.cssフレームワークbulma用テンプレート:codesandboxのvueでbulma利用

差分

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

この比較画面へのリンク

--- 00.cssフレームワークbulma用テンプレート:codesandboxのvueでbulma利用 [2018/12/23] – [CodeSandboxのVue.jsでBulmaを利用する方法] adash333
+++ 00.cssフレームワークbulma用テンプレート:codesandboxのvueでbulma利用 [2018/12/23] – [3. index.htmlとmain.jsの編集] adash333
@@ 行 35: / 行 35: @@
 {{:00.cssフレームワークbulma用テンプレート:pasted:20181223-185854.png}}
-==== 3. Add Dependencyでbulmaを追加 ====
+==== 3. index.htmlとmain.jsの編集 ====
+index.htmlとmain.jsを、以下のように書き換えます。
-参考
+index.htmlの</head>の直前に、以下のコードを挿入します。
-https://alligator.io/vuejs/css-frameworks-vuejs/
+<code>
+<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
+</code>
+（変更前）
+{{:00.cssフレームワークbulma用テンプレート:pasted:20181223-225640.png}}
+（変更後）
+{{:00.cssフレームワークbulma用テンプレート:pasted:20181223-225742.png}}
-$ npm install bulma
+次に、src/main.jsの5行目に以下のコードを追加します。
-After Bulma is downloaded, open up your main.js and import it.
-main.js
 <code>
 import './../node_modules/bulma/css/bulma.css';
 </code>
+（変更前）
+{{:00.cssフレームワークbulma用テンプレート:pasted:20181223-225815.png}}
+（変更後）
+{{:00.cssフレームワークbulma用テンプレート:pasted:20181223-225852.png}}
+これで、Vue.jsでbulmaとFontAwesome5が利用できるようになります。
+==== 4. src/App.vueの編集 ====
+src/App.vueを編集します。
+<html>
+<script src="https://gist.github.com/adash333/694c6f3555eb786a77c8bbc53692bdce.js"></script>
+</html>
+（変更前）
+{{:00.cssフレームワークbulma用テンプレート:pasted:20181223-230748.png}}
+（変更後）
+{{:00.cssフレームワークbulma用テンプレート:pasted:20181223-230845.png}}
+すると、以下のようになります。
+{{:00.cssフレームワークbulma用テンプレート:pasted:20181223-231113.png}}
+ソースコード
+<html>
+<iframe src="https://codesandbox.io/embed/6wqlmvyzk" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+</html>
+===== 参考 =====
+https://alligator.io/vuejs/css-frameworks-vuejs/
 font awesome 5は、以下のサイトからのリンクを、index.htmlの</head>の直前に挿入する。
@@ 行 59: / 行 93: @@
 https://saruwakakun.com/html-css/basic/font-awesome
 【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう　2018/12/20
 ===== リンク =====

00.cssフレームワークbulma用テンプレート/codesandboxのvueでbulma利用.txt · 最終更新: 2018/12/23 by adash333