はじめに
個人的にリスペクトしているMさんから 「Buefyはいいぞ」と話を聞きました。
なるほど。Buefyはなんのことかわからないですが、
いいものなら使ってみようと思い、とりあえず何か動かしてみようと思います。
Buefyとは
BulmaとVue.jsを組み合わせたモダンなUIコンポーネントのようです。
公式サイトを見てみると、 チェックボックスやラジオボタン、入力フォーム等がありました。
レイアウト面はBulma、動作はVue.jsで行なっているそうです。
それぞれのいいとこ取りなんですね。
Documentationのcodeをコピペで使えるとのことなので、
導入も簡単そうです。
Bulmaとは
Vue.jsとは
Buefyの利用にはVue.js ver2.5以降が必要とのことです。
Buefyの環境構築
PC環境
node.jsのインストール
推奨版の8.12.0 LTEにしました。
$ node -v v8.12.0 $ npm bin -g /usr/local/bin
vue-cliのインストール
$ sudo npm install -g vue-cli npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
WARN deprecatedとありますが、将来的にcoffee-scriptがcoffeescriptのハイフン無しになるという警告のようです。無視します。
プロジェクトの生成
適当なディレクトリに移動します。
vue init webpack demoBuefy ? Project name (demoBuefy)←プロジェクト名(大文字はダメとのことです。) ? Project description:←プロジェクトの説明 ? Author: ←著者名 ? Vue build:←矢印キーで選択(Runtime + Compiler: recommended for most usersにしました) ? Vue router:←vue-routerを使いますか(Y) ? Use ESLint to lint your code:←静的解析ツールのようです。(n) Setup unit tests:←Jestを選択しました Setup e2e tests with Nightwatch? ←ブラウザテストを自動化するフレームワーク(n) ? ? Should we run `npm install` for you after the project has been created? (recommended) ← Burfyの公式サイトをみるとNPMかYarnのようです(NPM) ...いろいろあって... # Project initialization finished! # ======================== To get started: cd demoBuefy npm run dev
画面の通りに入力すればNPMが立ち上がります。
$ cd demobuefy $ npm run dev
http://localhost:8080にアクセスするとvue-cliの開発画面が立ち上がりました。
Buefyのインストール
package.jsonのdevDependenciesの配列に次のコードを追加しました。
"webpack-merge": "^4.1.0",
"buefy": "^0.7.0"
"devDependencies": { "autoprefixer": "^7.1.2", "babel-core": "^6.22.1", ...いろいろあって... "webpack-merge": "^4.1.0", "buefy": "^0.7.0" },
保存したらインストールを始めます。
demobuefyディレクトリ内で以下のコマンド。
$ npm install
バンドルを追加します
Buefy/demoBuefy/src/main.jsに貼り付けます。こんな感じ
import Vue from 'vue' import Buefy from 'buefy' import 'buefy/dist/buefy.css' Vue.use(Buefy) import App from './App' import router from './router'
再度NPMを立ち上げます。
$ npm run dev
文字が細くなりました。成功のようです。
これでBuefyが使えるようになりました。
使ってみる
CollapseのPanelを使ってみようと思います。
< > Show codeで開き、Copyを押します。
以下のコードがコピーされます。
<template>
<section>
<div class="block">
<button class="button is-medium is-primary"
@click="isOpen = !isOpen">
Toggle
</button>
</div>
<b-collapse class="panel" :open.sync="isOpen">
<div slot="trigger" class="panel-heading">
<strong>Title</strong>
</div>
<p class="panel-tabs">
<a class="is-active">All</a>
<a>Public</a>
<a>Private</a>
</p>
<div class="panel-block">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br/>
Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. <br/>
Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.
</div>
</b-collapse>
</section>
</template>
<script>
export default {
data() {
return {
isOpen: true
}
}
}
</script>
この文章を
Buefy/demoBuefy/src/components/HelloWorld.vue
に貼り付けて上書きします。
文章が消えて、ボタンが表示されました。
無事にBuefyが動作しているようです。
課題
vue-cliについて、何も知識がないので、 使い方を学習して行こうと思います。
さいごに
Bulmaもvue-cliもBuefyも初めて聞いた状態からここまで進めることができました。
Vue.js面白そうですね。
