はじめに -Bootstrapを使ったら-
このような表を持つSPAを作りたくて Vue.jsでtableを使ってみた。 person-list.vue
"""
子コンポーネント
"""
<template>
<div>
<table class="table">
<tr>
<th>名前</th>
<th>年齢</th>
<th>出身地</th>
</tr>
<slot></slot>
</table>
</div>
</template>
App.vue
"""
親コンポーネント
"""
<template>
<div>
<person-list>
<tr v-for="person in persons" :key=person.Name>
<td>{{person.Name}}</td>
<td>{{person.Age}}</td>
<td>{{person.From}}</td>
</tr>
</person-list>
</div>
</template>
<script>
import personList from './components/person-list.vue'
export default {
components: {
personList
},
data () {
return {
persons:[
{
Name: '佐藤蒼',
Age: 19,
From: '東京都'
},
{
Name: '鈴木陽葵',
Age: 22,
From: '大阪府'
}
]
}
}
}
</script>
tableタグそのままでは古い表なので
モダンな表にしようと、Bootstrapを使ってみよう。
Vue.jsでBootstrapを使ってみた
Vue CLIで上記表を出すVueプロジェクトを作成。 プロジェクトでBootstrapを適用させてみる。今回試した環境は
OS:Windows10 Home
Vue:3.x (すみませんxの中身がわかりませんでした)
Vue CLI:4.5.11
下記の記事を参考に試した。
https://qiita.com/Mitsuzara/items/34d413698d1d88033ec0
https://qiita.com/kurararara/items/620dd4de798a941099f5
やったことは
- プロジェクトにvueをインストール
- main.jsにimport文を追加
をプロジェクトで実行するだけ。
2.はmain.jsを開いて
import Vue from 'vue'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.css' // add
import 'bootstrap-vue/dist/bootstrap-vue.css' // add
Vue.config.productionTip = false
を追加する。
これでBootstrapが適用されるはず。
Warning (Bootstrapが使えない)
npm run serveをやってみると  ？！ export 'default' (imported as 'Vue') was not found in 'vue' というエラーメッセージが出た。 ブラウザでWebアプリを確認すると  表が表示されてない...原因
Vue.js のバージョンが3なのが原因と思われる。 (引用：https://melheaven.hatenadiary.jp/entry/vue-bug) Bootstrap参考にしたサイトmain.jsと 自分のmain.jsが随分違うのに気付いた。参考サイト
import Vue from 'vue'
import App from './App.vue'
/* ここから */
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
/* ここまで */
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
私のmain.js
main.js
import { createApp } from 'vue'
import Vue from 'vue'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.css' // add
import 'bootstrap-vue/dist/bootstrap-vue.css' // add
Vue.config.productionTip = false
createApp(App).mount('#app')
参考サイトはVue 2.xだと思われるが
new Vueのところが createApp(App).mount('#app')
という風に、main.jsが随分変わっていた。
Vue v3でのBootstrap
index.htmlにCDNを追加
Vue3の変更点をよくわかっていないため、main.jsの書き換えは諦めた。 ではindex.htmlにBootstrapを使えば出来ないか？ と思い、publicの中にある「index.html」に CDN経由でBootstrapを入れてみた。public/index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
"""
ここにBootstrapのCDN linkを挿入
""
<title>Person List</title>
</head>
<body>
<h1>Person List</h1>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
これでrun serveしてみたら...
なんとBootstrapが適用されていた！
(tableのが微妙に違う気がするが...)
おわりに
index.htmlにCDN貼り付けで出来たとはいえ、応急処置感が半端ない(笑) いずれ対応することに期待。ちなみに今回はCDNしか試していません。
BootstrapのCSSファイルを直接ダウンロードして試した方がいらしましたら
是非とも教えてください。