Vue.js v3.x 以降でBootstrapを使う

<h1>はじめに -Bootstrapを使ったら-</h1>
このような表を持つSPAを作りたくて
Vue.jsでtableを使ってみた。
![最初のページ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595683/e04cceaf-7e71-aaa3-3a74-9f8efcdad656.png)

```javascript:person-list.vue
"""
子コンポーネント
"""
<template>
<div>
    <table class="table">
        <tr>
            <th>名前</th>
            <th>年齢</th>
            <th>出身地</th>
        </tr>
        <slot></slot>
    </table>
</div>
</template>
```

```javascript: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を使ってみよう。

<h3>Vue.jsでBootstrapを使ってみた</h3>
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
やったことは
<ol>
<li>プロジェクトにvueをインストール</li>
<li>main.jsにimport文を追加</li>
</ol>
1.は単純に
```npm install bootstrap-vue```

をプロジェクトで実行するだけ。

2.はmain.jsを開いて

```javascript
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が適用されるはず。


<h3>Warning (Bootstrapが使えない)</h3>
npm run serveをやってみると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595683/ab947069-19b2-503d-9675-29b5673aa94e.png)
？！
export 'default' (imported as 'Vue') was not found in 'vue'
というエラーメッセージが出た。
ブラウザでWebアプリを確認すると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595683/b968447e-57bd-af4c-09a0-f4980e79154a.png)
表が表示されてない...

<h3>原因</h3>
Vue.js のバージョンが3なのが原因と思われる。
(引用：https://melheaven.hatenadiary.jp/entry/vue-bug)
Bootstrap参考にしたサイトmain.jsと
自分のmain.jsが随分違うのに気付いた。

参考サイト

```javascript
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

```javascript: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が随分変わっていた。

<h1>Vue v3でのBootstrap</h1>
<h3>index.htmlにCDNを追加</h3>
Vue3の変更点をよくわかっていないため、main.jsの書き換えは諦めた。
ではindex.htmlにBootstrapを使えば出来ないか？
と思い、publicの中にある「index.html」に
CDN経由でBootstrapを入れてみた。

```html: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してみたら...
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595683/8bbafa30-4ae6-1fbd-1abb-7b13f674ddbb.png)

なんとBootstrapが適用されていた！
(tableのが微妙に違う気がするが...)

<h1>おわりに</h1>
index.htmlにCDN貼り付けで出来たとはいえ、応急処置感が半端ない(笑)
いずれ対応することに期待。

ちなみに今回はCDNしか試していません。
BootstrapのCSSファイルを直接ダウンロードして試した方がいらしましたら
是非とも教えてください。