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 ｖ5以降では「--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
　