意外と方法が見つからず手間取ったのでメモ
CDNを使う方法
取り急ぎ動かしてみたい、っていう人はこちら
<!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からリンク
ヘッダ内のリンク先をプロジェクト、フォルダ構成に応じて書き換えます。
<!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!'
}
})
できました。