npmとかyarnとか使わずにBootstrapVueを動かす

意外と方法が見つからず手間取ったのでメモ

# CDNを使う方法
取り急ぎ動かしてみたい、っていう人はこちら

```HTML
<!doctype html>
<html lang="ja">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Load required Bootstrap and BootstrapVue CSS -->
    <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
    <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
    <!-- Load polyfills to support older browsers -->
    <script src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
    <!-- Load Vue followed by BootstrapVue -->
    <script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
    <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
    <title>BootstrapVue</title>
  </head>
  <body>
    <div id="app">
      <b-alert show>{{ message }}</b-alert>
    </div>
    <script src="app.js" type="text/javascript"></script>
  </body>
</html>
```
```app.js
const app = new Vue({
    el: '#app',
    data: {
        message: 'Hello World!'
    }
})
```


# ダウンロードして使う方法
CDNってわけにもいかないけど、yarnとかも入れられないっていうパターンもあると思います。
今回は

- そこそこの規模で保守メインの既存プロジェクト
- メンバー全員にnpmとかyarnとか使わせるのはちょっと無理
- でも新規画面はVue.jsで書きたい！

というわけで、他メンバーへの影響を最小限に抑えたやり方を試してみました。

## 1. 必要なモジュールを集めてくる
先ほどのCDNからwgetで取ってきて、staticフォルダにいれます。

```
$ mkdir static
$ cd static
$ wget wget https://unpkg.com/bootstrap/dist/css/bootstrap.min.css
$ wget https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css
$ wget https://polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver
$ mv polyfill.min.js\?features\=es2015%2CIntersectionObserver polyfill.min.js
$ wget https://unpkg.com/vue@latest/dist/vue.min.js
$ wget https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js
```

## 2. フォルダ分け

分け方は色々あると思いますが、version情報がわからなくならないように
モジュールごとにversionフォルダにいれるのがオススメです。

version情報は各ファイルの先頭に書いてあるか、ない場合は公式サイトのリリースノートなど確認します。
2019年9月の時点では以下のような構成になりました。

```
└── static
     ├── bootstrap
     │   └── 4.3.1
     │       └── bootstrap.min.css
     ├── bootstrap-vue
     │   └── 2.0.0-rc.28
     │       ├── bootstrap-vue.min.css
     │       └── bootstrap-vue.min.js
     ├── polyfill
     │   └── v3
     │       └── polyfill.min.js
     └── vue
         └── 2.6.10
             └── vue.min.js
``` 


## 2. htmlからリンク
ヘッダ内のリンク先をプロジェクト、フォルダ構成に応じて書き換えます。

```HTML
<!doctype html>
<html lang="ja">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Load required Bootstrap and BootstrapVue CSS -->
    <link type="text/css" rel="stylesheet" href="static/css/bootstrap.min.css" />
    <link type="text/css" rel="stylesheet" href="static/css/bootstrap-vue.min.css" />
    <!-- Load polyfills to support older browsers -->
    <script src="static/js/polyfill.min.js" crossorigin="anonymous"></script>
    <!-- Load Vue followed by BootstrapVue -->
    <script src="static/js/vue.min.js"></script>
    <script src="static/js/bootstrap-vue.min.js"></script>
    <title>BootstrapVue</title>
  </head>
  <body>
    <div id="app">
      <b-alert show>{{ message }}</b-alert>
    </div>
    <script src="app.js" type="text/javascript"></script>
  </body>
</html>
```
```app.js
const app = new Vue({
    el: '#app',
    data: {
        message: 'Hello World!'
    }
})
```

できました。