00.cssフレームワークbulma用テンプレート:codesandboxのvueでbulma利用
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
00.cssフレームワークbulma用テンプレート:codesandboxのvueでbulma利用 [2018/12/23] – [3. Add Dependencyでbulmaを追加] adash333 | 00.cssフレームワークbulma用テンプレート:codesandboxのvueでbulma利用 [2018/12/23] (現在) – [4. src/App.vueの編集] adash333 | ||
---|---|---|---|
行 38: | 行 38: | ||
index.htmlとmain.jsを、以下のように書き換えます。 | index.htmlとmain.jsを、以下のように書き換えます。 | ||
+ | index.htmlの</ | ||
+ | < | ||
+ | <link rel=" | ||
+ | </ | ||
+ | (変更前) | ||
+ | {{: | ||
+ | (変更後) | ||
+ | {{: | ||
+ | 次に、src/ | ||
+ | < | ||
+ | import ' | ||
+ | </ | ||
+ | (変更前) | ||
+ | {{: | ||
+ | (変更後) | ||
+ | {{: | ||
- | 作成中 | + | これで、Vue.jsでbulmaとFontAwesome5が利用できるようになります。 |
+ | ==== 4. src/ | ||
+ | src/ | ||
+ | < | ||
+ | <script src=" | ||
+ | </ | ||
+ | (変更前) | ||
+ | {{: | ||
+ | (変更後) | ||
+ | {{: | ||
+ | すると、以下のようになります。 | ||
+ | {{: | ||
+ | ソースコード | ||
+ | https:// | ||
- | 参考 | ||
- | https:// | ||
- | $ npm install bulma | ||
- | After Bulma is downloaded, open up your main.js and import it. | ||
- | main.js | + | ===== 参考 ===== |
- | < | + | https://alligator.io/vuejs/css-frameworks-vuejs/ |
- | import './../node_modules/bulma/ | + | |
- | </code> | + | |
font awesome 5は、以下のサイトからのリンクを、index.htmlの</ | font awesome 5は、以下のサイトからのリンクを、index.htmlの</ | ||
行 68: | 行 91: | ||
https:// | https:// | ||
【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう 2018/ | 【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう 2018/ | ||
- | |||
- | |||
===== リンク ===== | ===== リンク ===== |
00.cssフレームワークbulma用テンプレート/codesandboxのvueでbulma利用.1545559420.txt.gz · 最終更新: 2018/12/23 by adash333