素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

IT

投稿日:

【Vue.js】Vue-CLI3でBootstarp-vueを導入する方法【デザインフレームワーク】

「Abel ツ Channel」開設!٩(ツ)و

この度、YouTubeチャンネルを開設しました!

ブログと並行してのんびりゲーム実況やら色々な動画を投稿していこうと思うので、よろしければ、
ポチィ〜!
して頂けるとこれ幸いです!٩(ツ)و

スポンサーリンク

336×280




VueアプリでBootstrap4を導入したい

管理システムや簡易なWebサイトを開発する際、そこまでデザインにこだわる必要がなく、とはいえ自分でCSSを作り込む時間をかけたい場合UIフレームワークを導入することになると思います。

Vueには多くのUIフレームワークがあるのですが、その中でもシンプルで使いやすいのがBootstrap-vueです。


BootstrapVue
With BootstrapVue you can build responsive, mobile-first projects on the web using Vue.js and the world’s most popular front-end CSS library — Bootstrap v4.
BootstrapVue

ちなみに、Vue.jsのUIフレームワークの中でもコンポーネントの数や使いやすさが筆者的に一番高いのはQuasarだと思っているので、気になる方はそちらも参考にしてみてください。

今回はVue-cliを用いてVueプロジェクトにBootstrap-vueの導入を行う方法をご紹介致します。

手順

Vueプロジェクトを作成

Vue-cli3を使ってVueプロジェクトを作成しましょう。

設定はお好きな形で作っちゃってください。

Bootstrap-Vueの導入

次に、vue-cliを使ってプロジェクトにBootstrap-Vueのプラグインを導入します。

これだけで導入作業は完了です。

例のごとく、設定周りはVue-cliが自動で更新してくれているので、gitの差分が出ているはずなので確認してみてください。

コアなファイルを例にあげるとにするとこのようにuseの指定が追加されています。

確認

では、実際にBootstrap-Vueのコンポーネントを使ってみましょう。

今回は公式ドキュメントのカードをそのままコピペしてみます。

無事にコンポーネントが使えるようになっていますね♪

本日のオススメ商品

終わりに

以上のように簡単にVueプロジェクトにBootstrap4を導入する事が出来ました。

Bootstrapは有名なUIフレームワークなので、Vue.jsと組み合わせたいという要望も多いと思うので、そんな時はこちらのやり方を試してみてください♪

336×280




336×280




CATEGORIES & TAGS

IT, , , , , , , , , , , ,

blogenist

Author: blogenist