山崎屋の技術メモ

IT業界で働く中でテクノロジーを愛するSIerのシステムエンジニア👨‍💻 | AndroidとWebアプリの二刀流🧙‍♂️ | コードの裏にあるストーリーを綴るブログ執筆者✍️ | 日々進化するデジタル世界で学び続ける探究者🚀 | #TechLover #CodeArtisan、気になること、メモしておきたいことを書いていきます。

Vue プロジェクトで Bulma を使う

HTML の class 属性に値を追加するだけで良い感じのページにしてくれる css フレームワークの bulma。Vue プロジェクトでも積極的に利用していきたいです。

公式ページ
Bulma: Free, open source, & modern CSS framework based on Flexbox

Vue プロジェクトでの使い方を ググってみたのですが、sass とかは使わない単純な css で bulma を使う方法が見つからなかったのでここにメモしておきます。

テーブルを表示するページを作成

vue-cli を使ってプロジェクトを作成します。このあたりを参考にしてください。
www.shookuro.com

デフォルトで作成される、HelloWorld.vue を List.vue に名前を変えて次のように書き換えました。

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>氏名</th>
          <th>生年月日</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>00001</td>
          <td>山田 太郎</td>
          <td>1980/01/01</td>
        </tr>
        <tr>
          <td>00002</td>
          <td>山田 二郎</td>
          <td>1980/01/02</td>
        </tr>
        <tr>
          <td>00003</td>
          <td>山田 三郎</td>
          <td>1980/01/03</td>
        </tr>
        <tr>
          <td>00004</td>
          <td>山田 四郎</td>
          <td>1980/01/04</td>
        </tr>
        <tr>
          <td>00005</td>
          <td>山田 五郎</td>
          <td>1980/01/05</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {

};
</script>

<style scoped>

</style>

App.vue はこうしました。

<template>
  <div id="app">
    <List />
  </div>
</template>

<script>
import List from "./components/List.vue";

export default {
  name: "app",
  components: {
    List
  }
};
</script>

<style>

</style>

「npm run serve」 で Web サーバを起動し、ブラウザで localhost:8080 にアクセスすると次のような表組みのリストが表示されました。
f:id:yyama1556:20190224160632p:plain

まだ css をなにも適用していないので、ダサいです。

bulma をインストール

npm install を利用して bulma をインストールします。

cmd>npm install bulma

余談ですが、npm v5以降では「--save」はデフォルトオプションになったので省略できます。

script タグ内に bulma をインポートする

List.vue の script タグ内に import を追加して次のようにします。

<script>
import 'bulma/css/bulma.css'; 
export default {

};
</script>

これで css を適用する準備が整いました。あとは List.vue の template タグ内で、取り込みたいスタイルを指定します。

テーブルにスタイルを適用する

今回は table タグの class 属性に 「table」と「is-striped」を適用してみましょう。「is-striped」は行ごとにストライプが入るスタイルです。

この他、テーブルに適用できるスタイルは公式ページで紹介されています。
Table | Bulma: Free, open source, & modern CSS framework based on Flexbox

table タグを次のように修正しました。

修正前。

    <table>

 
修正後。

    <table class="table is-striped">

ブラウザ確認すると良い感じのスタイルが適用されています。
f:id:yyama1556:20190224162521p:plain
 

Vue プロジェクトで Bulma を使うまとめ

単純な css から bulma を使用するには、npm で bulma をインストールして、script タグ内でインポートします。

今日はここまで。それでは!

Vue.js入門 基礎から実践アプリケーション開発まで

Vue.js入門 基礎から実践アプリケーション開発まで

  • 作者: 川口和也,喜多啓介,野田陽平,手島拓也,片山真也
  • 出版社/メーカー: 技術評論社
  • 発売日: 2018/09/22
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る
基礎から学ぶ Vue.js

基礎から学ぶ Vue.js

Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発

Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発