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

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であるため、上手くいかないのは当然だ。

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