Vue.js Bootstrap-Vueを利用したプロジェクトの作成

Vue.js Bootstrap-Vueを利用したプロジェクトの作成

Bootstrap-Vueを利用してbootstrap4を簡単に利用できるプロジェクトの作成手順。

環境

  • OS  ubuntu19.10
  • node v12.13.0
  • npm 6.12.1
  • @vue/cli 4.0.5

Vue CLI インストール

既に入れている方は必要ありません

プロジェクトの作成

ここでは、boot-testという名前でプロジェクトを作成

起動してみます

ブラウザから http://localhost:8080 にアクセスすると下記の画面が表示される

vue ui からも確認できます

ちょっと確認作業が面倒なので、外部からアクセス可能に変更する。

webpack.config.jsに下記を追加します。

再度起動するとプライベートIPからアクセス可能になります。

Bootstrap4を利用してみる

/boot-test/src内のApp.vueファイルのタグに classを追加して、bootstrapを適応してみる

ブラウザから http://localhost:8080 にアクセスするとCSSが適応され、下記の画面が表示される