サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール


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


差分

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

この比較画面にリンクする

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
00.cssフレームワークbulma用テンプレート:codesandboxのvueでbulma利用 [2018/12/23]
adash333 [CodeSandboxのVue.jsでBulmaを利用する方法]
00.cssフレームワークbulma用テンプレート:codesandboxのvueでbulma利用 [2018/12/23] (現在)
adash333 [4. src/App.vueの編集]
行 1: 行 1:
 ====== CodeSandboxのVue.jsでBulmaを利用する方法 ====== ====== CodeSandboxのVue.jsでBulmaを利用する方法 ======
  
 +===== 開発環境 =====
 +<code>
 +Windows10 Pro(Macでも同じです)
 +Chrome(CodeSandboxを利用するためWEBブラウザはChromeが望ましいです)
 +</code>
 +今回構築する環境
 +<code>
 +CodeSandbox上で
 +vue 2.5.2
 +bulma 0.7.2
 +</code>
  
 +==== 1. CodeSandboxで新規Vue.jsアプリを作成 ====
 +  -https://codesandbox.io/へ行き、画面右上の"Create Sandbox"をクリック
 +  -画面右上のあたりのVue(vue-cli)をクリック
 +  -以下のような画面になります
 +{{:00.cssフレームワークbulma用テンプレート:pasted:20181223-182439.png}}
 +==== 2. Add Dependencyでbulmaを追加 ====
 +通常は、コマンドプロンプトで、
 +<code>
 +npm install bulma
 +</code>
 +とするところですが、CodeSandboxでは、以下のように行います。
 +  *一番左の画面を下の方へ行き、"Add Dependency"をクリック
 +{{:00.cssフレームワークbulma用テンプレート:pasted:20181223-185047.png}}
 +{{:00.cssフレームワークbulma用テンプレート:pasted:20181223-185248.png}}
 +  *Search or enter npm dependency のところに、bulmaと入力
 +{{:00.cssフレームワークbulma用テンプレート:pasted:20181223-185525.png}}
 +  *すぐ下に出てくるbulma をクリックすると、bulmaがnpm installされます
 +{{:00.cssフレームワークbulma用テンプレート:pasted:20181223-185727.png}}
 +  *次の画面で、Dependenciesをクリックすると、bulmaがインストールされていることが確認できます
 +{{:00.cssフレームワークbulma用テンプレート:pasted:20181223-185832.png}}
 +{{:00.cssフレームワークbulma用テンプレート:pasted:20181223-185854.png}}
  
-参考 +==== 3. index.htmlとmain.jsの編集 ==== 
-https://alligator.io/vuejs/css-frameworks-vuejs/+index.htmlとmain.jsを、以下のように書き換えます。
  
 +index.htmlの</head>の直前に、以下のコードを挿入します。
  
-$ npm install bulma +<code> 
-After Bulma is downloaded, open up your main.js and import it+<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> 
- +</code> 
-main.js+(変更前) 
 +{{:00.cssフレームワークbulma用テンプレート:pasted:20181223-225640.png}} 
 +(変更後) 
 +{{:00.cssフレームワークbulma用テンプレート:pasted:20181223-225742.png}}
  
 +次に、src/main.jsの5行目に以下のコードを追加します。
 +<code>
 import './../node_modules/bulma/css/bulma.css'; 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}}
 +
 +ソースコード
 +https://codesandbox.io/s/6wqlmvyzk
 +
 +
 +
 +
 +===== 参考 =====
 +
 +https://alligator.io/vuejs/css-frameworks-vuejs/
 +
 +font awesome 5は、以下のサイトからのリンクを、index.htmlの</head>の直前に挿入する。
 +https://fontawesome.com/start
 +{{:00.cssフレームワークbulma用テンプレート:pasted:20181223-171826.png}}
 +
 +参考:https://niwaka-web.com/fontawsome5_css/
 +Font Awesome 5の使い方【Web Fonts with CSS編】更新日:2018年11月20日
 +
 +https://saruwakakun.com/html-css/basic/font-awesome
 +【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう 2018/12/20
  
 ===== リンク ===== ===== リンク =====


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