vuejs + bootstrap + npm + webpackの開発環境を構築。

vue.js + npm + webpackで開発をしていて、cssのフレームワークを何にしようか迷っていたのですが、結局bootstrapに落ち着きました。

こちらのvue-cliに沿ってインストールしただけです。 Getting Started

実装したテンプレートはこちら、 Bootstrap starter template

インストール

$ npm i -g vue-cli
$ vue init bootstrap-vue/webpack-simple vue-bootstrap-test
$ cd vue-bootstrap-test
$ npm install

開発

$ npm run dev

ビルド

$ npm run build
$ php -S localhost:8000

phpコマンドが入っている場合は、ビルド結果を簡易サーバを立てて確認することができます。

発生した問題

インストールでERROR

$ npm install

> fsevents@1.1.3 install ~/vue-bootstrap-test/node_modules/fsevents
> node install

[fsevents] Success: "~/vue-bootstrap-test/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile

> node-sass@4.7.2 install ~/vue-bootstrap-test/node_modules/node-sass
> node scripts/install.js

Cached binary found at /Users/hirasaki_mamoru/.npm/node-sass/4.7.2/darwin-x64-57_binding.node

> uglifyjs-webpack-plugin@0.4.6 postinstall ~/vue-bootstrap-test/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js

> bootstrap-vue@1.4.0 postinstall ~/vue-bootstrap-test/node_modules/bootstrap-vue
> opencollective postinstall || exit 0

[server error] Cannot load the stats for bootstrap-vue – please try again later
                                 ..,::::::::::,..
                              .,::::::::::::::::::,.
                           .,:::::::::::::::::::::,.
                         .:::::::::::,,,,,,,,:::,.
                        ,::::::::,.                      .
                       ,:::::::,                       .,,.
                      ,:::::::.                      .,,,,,.
                     .:::::::.                       .,,,,,,
                     :::::::.                        .,,,,,,.
                     :::::::                          ,,,,,,,
                     :::::::                          ,,,,,,,
                     :::::::.                        .,,,,,,.
                     .:::::::.                       .,,,,,,
                      ,:::::::.                      .,,,,,.
                       ,:::::::,                       .,,.
                        ,::::::::,.                      .
                         .:::::::::::,,,,,,,,:::,.
                           .,:::::::::::::::::::::,.
                              .,::::::::::::::::::,.
                                 ..,::::::::::,..

                      Thanks for installing bootstrap-vue 🙏
                 Please consider donating to our open collective
                        to help us maintain this package.

       👉  Donate: https://opencollective.com/bootstrap-vue/donate

> node-sass@4.7.2 postinstall ~/vue-bootstrap-test/node_modules/node-sass
> node scripts/build.js

Binary found at ~/vue-bootstrap-test/node_modules/node-sass/vendor/darwin-x64-57/binding.node
Testing binary
Binary is fine
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN bootstrap@4.0.0-beta.3 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
npm WARN babel-loader@6.4.1 requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none is installed. You must install peer dependencies yourself.

added 1072 packages in 29.851s

各バージョンや設定は以下の通り

$ npm -v
5.6.0

$ vue -V
2.9.2

試しにもう一度npm installコマンドを実行したら上手くいきました。何らかの理由で一瞬サーバに接続できなかったとかそれ系なのかな。

ヘッダーのドロップダウンが機能しない

Bootstrap dropdown require Popper.js (https://popper.js.org) #23381 こちらの情報を見ると、 poppers.jsとjquery, webpackの設定が必要だそうで、 vueコマンドで作成したプロジェクトにはなかったので追記しました。

最終的な設定はこちら

package.json

{
  "name": "vue-bootstrap-test",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "hirasaki_mamoru <mamoru.hirasaki@drecom.co.jp>",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.5.3",
    "jquery": "^3.2.1",
    "bootstrap": "^4.0.0-beta.2",
    "bootstrap-vue": "^1.2.0",
    "popper.js": "^1.12.9"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^6.0.0",
    "babel-preset-env": "^1.6.1",
    "cross-env": "^5.1.1",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.5",
    "node-sass": "^4.6.1",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.0",
    "vue-loader": "^13.5.0",
    "vue-template-compiler": "^2.5.3",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.4"
  }
}

webpack.config.js

 ~~ 省略 ~~
  plugins: [
    new ExtractTextPlugin("main.css"),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'Popper': 'popper.js'
    })
  ],
  ~~ 省略 ~~

main.js

import Vue from 'vue'
import BootstrapVue from "bootstrap-vue"
import App from './App.vue'
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap-vue/dist/bootstrap-vue.css"

require('jquery/dist/jquery');
require('popper.js/dist/umd/popper');
require('bootstrap/dist/js/bootstrap');

Vue.use(BootstrapVue)

new Vue({
  el: '#app',
  render: h => h(App)
})

App.vue

<template>
  <div id="app">
    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu" aria-labelledby="dropdown01">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>

    <main role="main" class="container">

      <div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">{{ msg }}</p>
      </div>

    </main><!-- /.container -->
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style lang="scss">
#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;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

これで、ドロップダウンが表示されるようになりました。なんだかんだで、bootstrapは便利です・・・。

参考

以下のサイトを参考にさせていただきました、ありがとうございました。