Open2
Buefyお試し
ごずVue.js + Bulmaを試してみたかったのでBuefyのお試ししてみる
個人のMacにはnode.js入れてなかったので入れる。
パッケージマネージャは簡単に使えるnにしておいた。
$ brew install n
$ sudo n lts
installing : node-v14.16.1
mkdir : /usr/local/n/versions/node/14.16.1
fetch : https://nodejs.org/dist/v14.16.1/node-v14.16.1-darwin-x64.tar.xz
installed : v14.16.1 (with npm 6.14.12)
これだけ。
vue.jsのインストール
$ mkdir buety_sample
$ cd buety_sample
$ npm install vue
+ vue@2.6.12
$ npm install -g @vue/cli
あ、vueが2.6.12だった。せっかくなのでvue3にしよう。
Buefyのvue3対応がまだだったので、2.6で大丈夫だった。
カレントにプロジェクトつくる
$ vue create .
とりあえず実行
npm run serve
Buefy導入
$ npm install buefy
+ buefy@0.9.7
added 2 packages from 2 contributors and audited 1334 packages in 9.424s
78 packages are looking for funding
run `npm fund` for details
found 2 moderate severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details
$ npm audit fix
組み込んでみる
$ cd src
$ vi main.js
main.js
import Vue from 'vue'
import App from './App.vue'
import Buefy from 'buefy';
import 'buefy/dist/buefy.css';
Vue.config.productionTip = false
Vue.use(Buefy);
new Vue({
render: h => h(App),
}).$mount('#app')
しばらくApp.vueに書き足したり、HelloWorldを消したりしてみてわかった。
何か追加したいなら、componentsの下にvueファイルを作って、<script>の中でimportし、exportのcomponentsに追加してやればよい。
App.vue
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue' // ← ここと
export default {
name: 'App',
components: {
HelloWorld // ←ここ
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Buefyのコンポーネントを組み込んでみる。
まずは、Table。
Buefyのサイトからサンプルコードをコピーして、App.vueにはればもちろん動く。
一通り遊んだらcomponentsに入れてみる。
components/Table.vue
<template>
<b-table :data="data" :columns="columns" bordered striped></b-table>
</template>
<script>
export default ({
data() {
return {
data: [
{ 'id': 1, 'first_name': 'Jesse', 'last_name': 'Simmons', 'date': '2016-10-15 13:43:27', 'gender': 'Male' },
{ 'id': 2, 'first_name': 'John', 'last_name': 'Jacobs', 'date': '2016-12-15 06:00:53', 'gender': 'Male' },
{ 'id': 3, 'first_name': 'Tina', 'last_name': 'Gilbert', 'date': '2016-04-26 06:26:28', 'gender': 'Female' },
{ 'id': 4, 'first_name': 'Clarence', 'last_name': 'Flores', 'date': '2016-04-10 10:28:46', 'gender': 'Male' },
{ 'id': 5, 'first_name': 'Anne', 'last_name': 'Lee', 'date': '2016-12-06 14:38:38', 'gender': 'Female' }
],
columns: [
{
field: 'id',
label: 'ID',
width: '40',
numeric: true
},
{
field: 'first_name',
label: 'First Name',
},
{
field: 'last_name',
label: 'Last Name',
},
{
field: 'date',
label: 'Date',
centered: true
},
{
field: 'gender',
label: 'Gender',
}
]
}
}
});
</script>
App.vueから貼り付けたコードを消して、componentsを読み込んでみる。
ついでにHeaderも付けちゃう。
App.vue
<template>
<div id="app">
<Header />
<div class="container">
<Table />
</div>
</div>
</template>
<script>
import Header from './components/Header.vue';
import Table from './components/Table.vue';
export default{
name: "App",
components: {
Header,
Table
}
}
</script>
tileも試してみる。
こちらはcomponentsを使わずに直接App.vueに書き込んでる。
App.vue
<template>
<div id="app">
<Header />
<div class="container">
<div class="tile is-ancestor">
<div class="tile is-4 is-vertical is-parent">
<div class="tile is-child box">
<p class="title">One</p>
ここにOneの何かを出す
</div>
<div class="tile is-child box">
<p class="title">Two</p>
ここにTwoの何かを出す
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child box">
<p class="title">テーブルサンプル</p>
<Table />
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Header from './components/Header.vue';
import Table from './components/Table.vue';
export default{
name: "App",
components: {
Header,
Table
}
}
</script>
こんな感じになりました。