Vue.jsにBootstrapを導入してみよう!UI・デザインに自信がない方におすすめのCSSフレームワーク!

Vue.jsにBootstrapを導入
  • URLをコピーしました!

今回は、Vue.jsにBootstrapを導入していこうと思います!
デザインに自信がない方や、デザインに時間をあまりかけずにそれなりのものを作っていきたい方におすすめしたい内容です。

現場でもよく使われるフレームワークなので、ぜひ参考にしてみてください!

こんな方に見て欲しい内容です!
  • デザインに自信がない
  • デザインにあまり時間をかけたくない
  • それなりのデザインで作成したい
  • UIフレームワークを使ってみたい

学習に使った本はこちら!

¥2,406 (2022/06/24 13:58時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
¥3,718 (2022/06/24 16:08時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
¥3,346 (2022/06/24 13:25時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
¥3,520 (2022/06/24 16:57時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
クマじい

Amazon Kindle Unlimited でもVue.jsの本はいっぱいあるんじゃ!!

  • 技術書をたくさん読みたい!
  • 色々な技術を学びたい!
初回30日間無料体験があるので、どのような参考書があるか確認してみよう!

Kindle Unlimitedで技術書を読むならタブレットがあるとさらに便利ですよ!
10インチあるとより見やすいと思いますが、7インチでも十分見やすくなります!

¥9,980 (2022/06/23 23:52時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
¥15,980 (2022/06/24 09:39時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
Bootstrapって何ですか?

ブラウザでの表示調整用をしてくれるCSSフレームワークです!
JavaScriptでの動的調整もあるので、正確にはCSS+JavaScriptのフレームワークになります。

ボタンなどのテンプレートデザインを提供してくれるフレームワークと認識しておけばいいと思います!

目次

Bootstrapを導入してみよう!

クマじい

わしはデザインが苦手だからの〜。

苦手でもかっこいいUIにできるのがBootstrapなので安心してください!
Bootstrapを導入していきますが、もしVueのアプリをまだ作ったことがない方は、こちらから雛形のVueアプリを作ってからみてもらえるとわかりやすいと思います!

では早速始めていきます!

Bootstrapをインストール方法を確認しよう!

まずは、Bootstrapをインストールします。
ただ、今回はBootstrapではなく、BootstrapをVue用にカスタマイズされた「BootstrapVue」を使っていきます!

BootstrapVueの公式ページを確認すると、下記のようにインストールすると記載があります。
今回は、前回まで使っていた「npm」でインストールするので、「With npm」でやっていきます。

# With npm
npm install vue bootstrap bootstrap-vue

# With yarn
yarn add vue bootstrap bootstrap-vue

ただ、vue create [app_name]のコマンドで、雛形を作った場合、vueはすでにインストールされています。
このままインストールしても、問題ないのですが今回は、package.jsonを確認してインストールされていないものだけインストールしていくことにします!

package.jsonを確認しよう!

実際にvueがインストールされていることを確認してみようと思います!

とその前にpackage.jsonはどのようなものなのかというと、

package.json

依存関係を記載したJSONファイルです。

  • プロジェクト毎に必要なパッケージの名前とバージョンを記述する
  • npm install [package_name]を実行すると、package.jsonのdependenciesに記述してくれる。
  • npm installを実行すると、package.jsonに記載のあるパッケージと依存しているパッケージを自動インストールしてくれる

GITなどを使って複数人で開発をしている場合、同じpackage.jsonからnpm installをすることで、同じ開発環境を複製することができる仕組みです!

すなわち、今回はpackage.jsonに記載のないパッケージをインストールしてあげてpackage.jsonに記述されている状態にしてあげればいいということです!

sample-client(作成時につけたProject名)>package.jsonを見てみましょう!

v sample-client 
) node modules 
> public 
v components 
V He IoWoddvue 
V App.vue 
main js 
.gitignore 
b abeLconfig.js 
O package-json 
READMEmd

package.json

{
  "name": "sample-client",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

今のところ、vueはインストールされているようですね。(正確には、依存関係として記載がある状態。)
なので、今回は「bootstrap」「bootstrap-vue」をインストール(package.jsonに追記)していこうと思います!

コマンドは、BootstrapVueをインストールしたいアプリのディレクトリに移動して、
「npm install bootstrap bootstrap-vue」で実行します!

C:\Users\*****\Documents\sample-vue-app> cd .\sample-client\
C:\Users\*****\Documents\sample-vue-app\sample-client> npm install bootstrap bootstrap-vue

・・・

+ bootstrap@4.6.0
+ bootstrap-vue@2.21.2
added 14 packages from 20 contributors and audited 1327 packages in 18.187s

71 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

メッセージが、いくつか出てきますが終了して、package.jsonの中身が下記のようになっていればOKです!

{
  "name": "sample-client",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "bootstrap": "^4.6.0",
    "bootstrap-vue": "^2.21.2",
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

npm install [package_name]で、package.jsonに追記すると同時にインストールもするので、これでBootstrapVueのインストールは完了です!

BootstrapVueを適応していこう!

BootstrapVueをインストールするだけでは、使うことはできません。

次は、BootstrapVueを適応していこうと思います!

sample-client(作成時につけたProject名)>src>main.jsを開いてください!

v sample-client 
) node modules 
> public 
v components 
V He IoWoddvue 
V App.vue 
main js 
.gitignore 
b abeLconfig.js 
O package-json 
READMEmd

下記の内容になるように「add」とコメントがついている場所を追記してください!

main.js

import Vue from 'vue'
import App from './App.vue'
// bootstrap-vueからBootstrapVue,IconPluginをインポートする
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue' // add
// Bootstrap と BootstrapVueのCSSファイルをインポート(順序はBootstrap⇒BootstrapVue)
import 'bootstrap/dist/css/bootstrap.css' // add
import 'bootstrap-vue/dist/bootstrap-vue.css' // add

// BootstrapVueをプロジェクト全体で利用できるようにする
Vue.use(BootstrapVue) // add

// BootstrapVueアイコンコンポーネントプラグインの使用
Vue.use(IconsPlugin) // add

Vue.config.productionTip = false

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

ここまでできたら、一旦確認してみましょう!
npm run serveを実行して、ローカルで確認してみてください!

C:\Users\*****\Documents\sample-vue-app\sample-client> npm run serve

> sample-client@0.1.0 serve C:\Users\*****\Documents\sample-vue-app\sample-client
> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 15354ms                                                                                                                                                                                              21:43:03

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

  Note that the development build is not optimized.
  To create a production build, run npm run build. 

特に変化はありませんね。。。
ただ、Bootstrap Vueを使えるようにしただけなので、当たり前なのですが。

とりあえず設定は終わっているので、次はボタンを追加して使えるか確認してみましょう!

BootstrapVueを使ってみる!

では実際にBootstrapVueを使ってボタンを作成していきましょう!

今回は、HelloWorld.vueにボタンを作成していきます!
vue create [project_name]で作成していると、デフォルトで作成されていると思います。
もし別の方法で作られていたら、ボタンを配置できるvueファイルに作成してみてください!

sample-client(作成時につけたProject名)>src>components>HelloWorld.jsを開いてください!

v sample-client 
) node modules 
> public 
v components 
V He IoWoddvue 
V App.vue 
main js 
.gitignore 
b abeLconfig.js 
O package-json 
READMEmd

マーカーが引いてある行を追加してみてください!
(サンプルを探して、好きなデザインのボタンを追加してもらってもOK)

ちなみにHelloWorld.vueには、画面にあるTextとかリンクが記載されてます。

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
    <button class="btn btn-primary">bootstrap-btn</button>
    <b-button variant="primary">bootstrap-vue-btn</b-button>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

ここまでできたら、画面を確認してみましょう!!

同じデザインのボタンが2つ追加されていると思います!

実は、Bootstrapを使った場合と、BootstrapVueを使った場合のボタンを配置しておりました。

Bootstrapの書き方

<button class="btn btn-primary">bootstrap-btn</button>

BootstrapVueの書き方

<b-button variant="primary">bootstrap-vue-btn</b-button>

比較してもらうと分かると思うのですが、Bootstrapを使うとclassが長くなって書きにくいので、
vueを使うならBootstrapVueを使うのがいいかなと思います。

インストール時に、bootstrapもインストールしていたので、両方の書き方で使えるようになってます。
現時点では気にする必要はないですが、BootstrapVueをカスタマイズする際にBootstrapを編集することがあります。

他のデザインが良ければ、ここからボタンのサンプルを探してみてください!

クマじい

わしでもオシャレなボタンを配置できたぞ!

まとめ

今回は、Bootstrapを導入して、ボタンを配置してみました。
導入は、少し難しい単語も出てきたと思いますが、とりあえずボタンの配置はできたのではないでしょうか!

学習に使った本はこちら!

¥2,406 (2022/06/24 13:58時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
¥3,718 (2022/06/24 16:08時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
¥3,346 (2022/06/24 13:25時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
¥3,520 (2022/06/24 16:57時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
クマじい

Amazon Kindle Unlimited でもVue.jsの本はいっぱいあるんじゃ!!

  • 技術書をたくさん読みたい!
  • 色々な技術を学びたい!
初回30日間無料体験があるので、どのような参考書があるか確認してみよう!

Kindle Unlimitedで技術書を読むならタブレットがあるとさらに便利ですよ!
10インチあるとより見やすいと思いますが、7インチでも十分見やすくなります!

¥9,980 (2022/06/23 23:52時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
¥15,980 (2022/06/24 09:39時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場

Bootstrapを使ってヘッダーとフッダーの作り方を、こちらの記事で紹介しております

ヘッダーとフッダーがあるだけで、すごくおしゃれに見えるのでぜひ実践してみてください!
ヘッダーとフッダー以外にもいろいろあるので、公式サイトを参考に自分なりのカスタマイズをしてみるといいかなと思います!

Vue.jsにBootstrapを導入

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

東京在住で20代のエンジニアです。
特に特技があるわけではありませんが、誰もが楽しくプログラミングができたらいいと思い、「teech lab.」を開設いたしました。

Enjoy Diaryという、ガジェットや雑貨を紹介しているブログもあります!
ぜひ、みてください!!

目次
閉じる