Vue.jsアプリの見た目を良くするコンポーネントセットBuefyを使うための準備

はじめに

BuefyはBulmaというUIコンポーネントセットをベースにしたVue.js用のUIコンポーネントセットです。Bootstrapのようにあらかじめ用意されたHTMLタグやCSSクラスを使うことで簡単にそれなりの見た目になります。ここでは、Vue.jsアプリでBuefyを使えるようにするための準備手順と、最後にmarginやpadding用のクラスをBeufyに追加する方法をメモします。

前提と環境

ここでのVue.jsアプリは、Vue CLIのcreateコマンドによって作成したデフォルトの状態です。Vue.jsアプリの作成手順は、Windows10（WSL使用）でVue.jsアプリを作成するまでの手順にまとめています。

• Vue.jsアプリはWindows10 + WSL + Ubuntu上で動作
• Node.js、Vue CLI（３系）はインストール済とする
• Vue.jsアプリはVue CLIで作成済。（router、scssなどの機能を指定して作成）

Vue.jsアプリフォルダのツリー構造は以下のようになっています。これは、こちらの記事でVue CLIのcreateコマンドを使って作成した場合のデフォルトの状態です。Beufyを使えるようにするためにmain.jsを少しだけ追記します。

├── babel.config.js
├── node_modules
├── package.json
├── package-lock.json
├── public
├── README.md
└── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    ├── main.js
    ├── router.js
    └── views
        ├── About.vue
        └── Home.vue

Buefyについて

どのような見た目のコンポーネントが用意されているかは、以下の公式サイトに載っています。入力フォームのパーツはもちろん、BoostrapのようなグリッドレイアウトもBulmaのものを引き継いでおり使えるようです。

Buefyをインストールする

npm installでBuefyのパッケージをインストールします。

$ npm install buefy --save

main.jsを編集する

Beufyをアプリ全体で使えるようにするために、main.jsに以下の通りimportを追記します。これでBeufyを使用できるようになります。

import  Vue  from  'vue'
import  Buefy  from  'buefy' // 追記
import  'buefy/dist/buefy.css' // 追記
import  App  from  './App.vue'
import  router  from  './router'

Vue.use(Buefy)
Vue.config.productionTip  =  false

new  Vue({
router,
render: h  =>  h(App)
}).$mount('#app')

以上でBeufyを使う準備は完了です。後は実際にBeufyのコンポーネントを使っていきます。 なお、上記では、Beufyのすべてのコンポーネントをインポートして使えるようにしています。実際に本番環境で運用する場合は、必要なコンポーネントのみをそれぞれインポートして使うことが公式ドキュメントでも推奨されています。例えば、以下のようにそれぞれ指定してインポートします。

レイアウトを変更する

Beufyでは、cssのclassにcontainerを付与することで最大横幅を調整できます。

<div class="container">
...
</div>

レイアウトについてはBulmaの設定をそのまま引き継いでいるため、Bulmaの公式ドキュメント通りになります。

グリッドレイアウトにする

以下のように、columnsクラスを持つ要素の中にcolumnクラスを持つ要素を並べると、その個数分分割されます。Bootstrapでのcolと同じですね。実際の見た目は以下の公式ドキュメント先に載っています。以下のコードも公式ドキュメントの引用です。

<div class="columns">
  <div class="column">
    First column
  </div>
  <div class="column">
    Second column
  </div>
  <div class="column">
    Third column
  </div>
  <div class="column">
    Fourth column
  </div>
</div>

スペース関係のCSSクラスを追加する

BulmaとBuefyには、Bootstrapのmt-1やpt-1のようなmarginやpaddingを付与するクラスが用意されていません。（Bootstrapのスペースを付与するクラスについてはSpacing - Bootstrapに記載されています。） そこで、Beufyでもmarginやpaddingを付与するクラスを使えるようにするために、例えば以下のようなscssを追加しておくことができます。以下のコードはこちらAdd spacing helper #451 - GitHubを参考にしました。なお、以下は各コンポーネントファイル（例えば、Home.vueなど）に直接追記して使用します。

<style lang="scss">
$spaces: (0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50); // 0から50pxまでを用意
$sides: (top, bottom, left, right); // 方向性

@each $space in $spaces {
  @each $side in $sides {
    .m-#{str-slice($side, 0, 1)}-#{$space} {
      margin-#{$side}: #{$space}px !important;
    }

    .p-#{str-slice($side, 0, 1)}-#{$space} {
      padding-#{$side}: #{$space}px !important;
    }
  }
}
</style>

あとは以下のように好きな要素で以下のようにクラスを追加することで使用できます。

<div class="m-t-10 m-b-10"><!-- margin-top: 10pxとmargin-bottom: 10px -->
...
</div>

各コンポーネントを使う

あとは公式ドキュメントに記載されている色々なコンポーネント用のタグやクラスを使うことでお手軽に綺麗な見た目に変更することができます。以下の公式ドキュメントにコンポーネントのコードが記載されています。

まとめ

Beufyを使うことで手軽に見た目を整えることができ便利です。