アクセスありがとうございます!次は「とあるエンジニアのエソラゴト」で検索して頂けると嬉しいです!

Vue.jsでBootstrapを使用する方法を解説する

エソラ
エソラ

どうも、当ブログ(とあるエンジニアのエソラゴト)を運営している、エンジニアのエソラ(@ya6madev)です。
普段はSIer企業でDXとかAI開発をしながら、自社サービスの開発をしています。

はじめに

エソラ
エソラ

フロントエンドの開発をする際、CSSを設定するの面倒くさくないですか?

すごく時間をかけてCSSを設定したのに、出来たのはショボいレイアウトだったということもあります。

パッと綺麗な画面が作れたら、どんなに便利でしょうか?

ということで、今回はCSSフレームワークであるBootstrapをVue.jsで使用する方法を記載します。

エソラ
エソラ

Bootstrapを利用したら、綺麗なレイアウトを簡単に作成することが出来ます。

ということで、使い方を知ればすごくフロントエンドエンジニアとしてのレベルが上がります。

ぜひ、この機会に使い方を確認して下さい!

では、いきましょうー!

Vueプロジェクトを作成する

まずはBootstrapを乗っける、Vueプロジェクトを作成します。

Vue CLIのインストール

以下の通り、Vue CLIをインストールします。

Vue CLIとは、コマンドラインでVue.jsのプロジェクトを作成するための開発ツールです。

インストールのためには、以下のコマンドを入力します。

# npmの場合
$ npm install -g @vue/cli @vue/cli-service-global

# yarnの場合
$ yarn global add @vue/cli @vue/cli-service-global

これで、Vue CLIがインストール出来ました!

Vueプロジェクトをコマンドで作成する

では、先程インストールしたVue CLIを使って、Vueプロジェクトを作成します!

以下のコマンドを入力して下さい!

$ vue create vue-bootstrap-sample

# 上記のコマンドを打つと、以下の設定で良いか確認されるので、良ければEnterを押す
? Please pick a preset: default (babel, eslint)

すると、カレントディレクトリの直下に「vue-bootstrap-sample」というフォルダが出来ていると思います。

これがVueプロジェクトとなります。

試しに以下のコマンドを入力して、Vueプロジェクトを起動してみましょう。

# ディレクトリを移動して...
$ cd vue-bootstrap-sample/

# 起動コマンドを入力
$ npm run serve

  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.1.3:8080/

よくコマンド入力後のメッセージを確認すると、上記のようにアクセスするためのアドレスが出てきますので、ブラウザにURLを打ち込みます。

すると、下記のようにWelcome画面が出たと思います!

これでVueプロジェクトの準備が完了しました。

VueプロジェクトにBootstrapを適用する

では、実際にここからはBootstrapを使用していくための設定をしていきます。

まずは、ライブラリのインストールです。以下のコマンドを入力します。

(Vueアプリを立ち上げたままの場合は、コマンド入力の前に「Ctrl + C」を押して下さい)

# npmの場合
$ npm install vue bootstrap-vue bootstrap

# yarnの場合
$ yarn add vue bootstrap-vue bootstrap

インストールが成功している場合は、以下のようにpakage.jsonに「bootstrap」と「bootstrap-vue」が追加されています。

{
略
  "dependencies": {
    "bootstrap": "^4.4.1",
    "bootstrap-vue": "^2.12.0",
    "core-js": "^3.6.4",
    "vue": "^2.6.11"
  },
略
}

それでまた再度、Vueプロジェクトを起動して、URLにアクセスします。(コマンドは前述)

これ以降の修正内容はブラウザにリアルタイムに反映されていくので、確認しながらやってみて下さい。

次に、main.jsを以下のように修正します。

import Vue from "vue";
import App from "./App.vue";
import { BootstrapVue, BootstrapVueIcons } from "bootstrap-vue"; // 追加
import "bootstrap/dist/css/bootstrap.css"; // 追加
import "bootstrap-vue/dist/bootstrap-vue.css"; // 追加

Vue.use(BootstrapVue); // 追加
Vue.use(BootstrapVueIcons); // 追加
Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
}).$mount("#app");

これでBootstrapを使うための設定が出来ました。

Bootstrapを使ってみる!

では、適当にBootstrapを使ってレイアウトを作ってみて、ちゃんとBootstrapが適用されているか確認してみましょう!

まずはApp.vueを綺麗にします。

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
};
</script>

<style></style>

そして以下のようにHelloWorld.vueを修正します。

この例ではNavbarとTableを作っています。

<template>
  <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>
    <b-table striped hover :items="items"></b-table>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      items: [
        { age: 40, first_name: "Dickerson", last_name: "Macdonald" },
        { age: 21, first_name: "Larsen", last_name: "Shaw" },
        { age: 89, first_name: "Geneva", last_name: "Wilson" },
        { age: 38, first_name: "Jami", last_name: "Carney" },
      ],
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

ここまでやった上で、ブラウザを確認すると、以下のようになります。

これでBootstrapの適用確認は終わりです!

最後に

パパっと綺麗なレイアウトを作れるBootstrapは非常に強力だと思いました。

NavbarやTable以外にも、FormやAlert等まだまだレイアウトのパーツがあります。

これ以上の詳しい内容は、bootstrap-vueの公式リファレンスを参照して下さい。

公式リファレンスにはサンプルも豊富にありますので、きっと簡単に綺麗なレイアウトを作れると思います。

またフロントエンドエンジニアとしてスキルアップしたい場合は、以下の記事が参考になりますので、ご興味あればご確認下さい。

ここまでお読み頂き、ありがとうございました。
もし、「面白かった」、「参考になった」という方がいましたら、以下のソーシャルボタンからシェア頂けると泣いて喜びます!!
エソラ
エソラ
またブログランキングにも参加しています。 よろしければ、ポチッとお願いしまーす!
それでは、良いエンジニアライフをお過ごし下さい!
最新情報をチェックしよう!