Posted at

ローカルでCDNのBootstrapVueを試そうとしたらハマった

Bootstrap Vueに限った話ではないが、小一時間消耗したのでメモ

Bootstrap Vueを使う方法はいろいろあるが、手軽に試したかったのでCDN版を試した。

https://bootstrap-vue.js.org/docs/

の「Browser」に導入の仕方が書いてある (2018/11時点)

<!-- Add this to <head> -->

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>

<!-- Add this after vue.js -->
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

ローカルに作成したindex.htmlの<head>タグの内側にcssを、<body>タグにjsの読み込みを追加。Vueのインスタンス生成を記述。

Bootstrap Vue コンポーネント Collapseのサンプル:

https://bootstrap-vue.js.org/docs/components/collapse

も貼り付けて保存。

ブラウザで開いてみたが、CSSとJSが上手く適用されなかった。

問題は、CDNのURLを記入するところでプロトコル(http or https)を省略していたことだった。css読み込みのhrefの箇所と、js読み込みのsrcの箇所にhttps:を追加したら上手く適用された。


index.html

<!doctype html>

<html lang="jp">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-with, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="content-type" content="text/html; charset = UTF-8">
<title>My first Bootstrap-Vue app</title>
<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.css" />
</head>

<body>
<div id="app">
<b-btn v-b-toggle.collapse1 variant="primary">Toggle Collapse</b-btn>
<b-collapse id="collapse1" class="mt-2">
<b-card>
<p class="card-text">Collapse contents Here</p>
<b-btn v-b-toggle.collapse1_inner size="sm">Toggle Inner Collapse</b-btn>
<b-collapse id=collapse1_inner class="mt-2">
<b-card>Hello!</b-card>
</b-collapse>
</b-card>
</b-collapse>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
}
</script>
</body>

</html>


⇒ 期待する表示になった

調べたらhttp:https:を省略して参照先URLを書くと、参照元の接続プロトコルを補完してリンクしてくれるらしい。ローカルのファイル参照(?)プロトコルはfileであるため、上手くいかないのは当然だ。

すでに、書いてる人がいた。