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 初心者がなにか作りきってみる(願望)

記事が少しでもいいなと思ったらクラップを送ってみよう!
2
+1
@kurarararaの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする