BETA

Bootstrap を Vue.js で使ってみよう

投稿日:2018-11-08
最終更新:2018-11-08
※この記事は外部サイト(https://qiita.com/kurararara/items/620dd4d...)からのクロス投稿です

Bootstrap is 何?

公式によると

Bootstrap

Build responsive, mobile-first projects on the web with the world's most popular front-end component library.

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.

なツールキットです!

アプリのデザインって、全部を行おうとするとなかなかに大変ですよね。

デザインに時間を割けない時などに Bootstrap を利用すると、ボタン、アラート、モーダル、インプット要素...画面を構成するあらゆる要素を統一感のあるテーマで簡単に作成できるようになります!

それに、何よりオシャレですね!!

Bootstrap 公式

Bootstrap + Vue 公式

Bootstrap をインストール

まずはプロジェクトへ移動して。

> cd my-project

次のコマンドでインストールします。

  • Yarn を使った場合
> yarn add bootstrap-vue
  • npm を使った場合
> npm install bootstrap-vue

Vue.js で使うには?

main.js に次のようにコーディングします。

import Vue from 'vue'
import App from './App.vue'

/* ここから */
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
/* ここまで */

Vue.config.productionTip = false

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

後はテンプレートに Bootstrap の専用タグを埋め込むだけで使用することができます。

確認しよう

About ページにボタンを表示してみましょう!

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <b-button
      size="lg"
      variant="outline-primary">
      Bootstrap Button
    </b-button>
  </div>
</template>

アプリ起動して。

> yarn serve

http://localhost:8080/ にアクセスです!

いえい!

コンポーネントの種類や、使い方はこちらをご覧ください。

Bootstrap - Components

まとめ

インストールの際に、生の Bootstrap ではなくて、Vue.js 専用のものをインストールするのがポイントですね!

(私は間違えたぞ!)

プログラマーさんはデザインが苦手って言う人が多い気がします。

そういう方でもオシャレなアプリを作れる Bootstrap は素敵ツールですね!

インデックスページから来た人向け

オシャレなボタンが表示されると洗練された感じが出てきますよね~(いつも同じこと言ってる)

これから少しづつ機能を増やしていきますので、よかったら他の記事も見てみてください!

Vue.js 初心者がなにか作りきってみる(願望)

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@kurarararaの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!