ローカルでCDNのBootstrapVueを試そうとしたらハマった
ローカルでCDNのBootstrapVueを試そうとしたらハマった:
Bootstrap Vueに限った話ではないが、小一時間消耗したのでメモ
Bootstrap Vueを使う方法はいろいろあるが、手軽に試したかったのでCDN版を試した。
https://bootstrap-vue.js.org/docs/
の「Browser」に導入の仕方が書いてある (2018/11時点)
ローカルに作成したindex.htmlの
Bootstrap Vue コンポーネント Collapseのサンプル：
https://bootstrap-vue.js.org/docs/components/collapse
も貼り付けて保存。
ブラウザで開いてみたが、CSSとJSが上手く適用されなかった。
問題は、CDNのURLを記入するところでプロトコル(http or https)を省略していたことだった。css読み込みのhrefの箇所と、js読み込みのsrcの箇所に
⇒ 期待する表示になった
調べたら
すでに、書いてる人がいた。
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>
<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であるため、上手くいかないのは当然だ。すでに、書いてる人がいた。
コメント
コメントを投稿