はじめに
Vue.jsを用いてポートフォリオなどを作成するとき、Bootstrapを使いますよね。
そのときに、ナビゲーションバーを実装するのが少し詰まった点だったので残しておきます。
大まかな流れやVue CLIに関しては、下記記事を参考にさせていただきました。
ありがとうございました。
- https://qiita.com/masa08/items/3474d97a1283dfc275c9
- https://qiita.com/Junpei_Takagi/items/603d44f7885bd6519de2
環境構築
Node.jsのインストール
まずは開発環境にNode.jsをインストールして下さい。
https://nodejs.org/ja/
最新版でも良いですが、LTS（Long Term Support）版のほうが安定動作すると思います。
インストールした後に、念のため下記コマンドでバージョン番号が出力されることを確認しましょう。
node -v
Vue CLIのインストール
Vue CLIは下記のページの通り、次のコマンドでインストールすることができます。
https://cli.vuejs.org/
npm install -g @vue/cli
プロジェクトの作成
一通り環境が整ったら、プロジェクトを作成しましょう。
まずは自分の好きなプロジェクト名を決めてください。
プロジェクト名を決めたら、Vue CLIのページにあるように下記コマンドでプロジェクトを作成しましょう。
vue create [プロジェクト名]
これでプロジェクトが作成されるはずです。
コマンドを実行した際にデフォルトかマニュアルかと聞かれるので、特に理由もなければデフォルトで良いです。
そうしたら、下記コマンドで初期設定およびローカルサーバの立ち上げをしてデフォルト画面を確認しましょう。
cd [プロジェクト名] # 作成したプロジェクトまで移動
npm install
npm run serve
ローカルサーバが立ち上がると http://localhost:8080/ にアクセスできるようになります。
おそらく下記のような画面になると思います。
bootstrap-vueのインストール
Vue.js用のBootstrapコンポーネントを書き込まんでにてインストールします。
npm install --save bootstrap-vue
ナビゲーションバーの実装
Bootstrapコンポーネントのインポート
まずはBootstrapが使えるように、コンポーネントをインポートしましょう。
import Vue from 'vue'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.css' //Add
import 'bootstrap-vue/dist/bootstrap-vue.css' //Add
import BootstrapVue from 'bootstrap-vue' // Add
Vue.config.productionTip = false
Vue.use(BootstrapVue) // Add
new Vue({
render: h => h(App),
}).$mount('#app')
準備ができたら、ここ（https://bootstrap-vue.js.org/docs/components/navbar/）を参考にナビゲーションバーを実装しましょう。
今回はサンプルをそのままコピー＆ペーストしてみます。
<template>
<div id="app">
/* ここから追加 */
<div>
<b-navbar toggleable="lg" type="dark" variant="info">
<b-navbar-brand href="#">NavBar</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item href="#">Link</b-nav-item>
<b-nav-item href="#" disabled>Disabled</b-nav-item>
</b-navbar-nav>
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto">
<b-nav-form>
<b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
<b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
</b-nav-form>
<b-nav-item-dropdown text="Lang" right>
<b-dropdown-item href="#">EN</b-dropdown-item>
<b-dropdown-item href="#">ES</b-dropdown-item>
<b-dropdown-item href="#">RU</b-dropdown-item>
<b-dropdown-item href="#">FA</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown right>
<!-- Using 'button-content' slot -->
<template v-slot:button-content>
<em>User</em>
</template>
<b-dropdown-item href="#">Profile</b-dropdown-item>
<b-dropdown-item href="#">Sign Out</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</div>
/* ここまで追加 */
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'app',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
ここまでできたら、ローカルサーバを立ち上げて画面を確認してみましょう。
うまくできていれば、下記のような画面になるはずです。
画面上部に妙な空白はありますが、ナビゲーションバーができているのがわかります。
キャプチャの画面では、横幅がそれなりにあるのでハンバーガーメニューになってないですが、画面サイズを狭めるとちゃんとハンバーガーメニューになります。
最後に、妙な空白を取り除きましょう。
// ~ 上部は省きます ~
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
/* margin-top: 60px; */ // ← ここをコメントアウト
}
</style>
スタイルを修正することで下記のようにナビゲーションバーが上部に隙間なく表示されているはずです。
今回は画面幅を狭めたので、ハンバーガーメニューで表示されています。
さいごに
もともと参考にしたサイトだと、Bootstrap-vueを利用しているのですが、通常のBootstrapと同じ記載の仕方となっており、ハンバーガーメニューをクリックしても表示されませんでした。
おそらく、スタイルシートを読み込んでいても、BootstrapのJavaScriptファイルを読み込んでいなかったせいだと思います。
スタイルシートと同様にJavaScriptファイルを読み込もうとしたのですが、JQueryなども必要になってしまったのでBootstrap-vueが用意しているVueコンポーネントを使うことにしました。
今回はナビゲーションバーのみでしたが、ほかにも様々なVueコンポーネントが用意されているので、色々と試してみてください。