【Vue初心者でも超簡単にできた♪】laravelでvue.jsとvue-bootstrapを使う方法

初心者の私がVue.jsをなんとなく始められるようになってきて、フォームを作っていたのですが。。

da….ダサい         

可愛い物好きの女子なら絶対許せない

←そんなキャラかよ  

ということで馴染みのあったbootstrap4をVue.jsと使えるようにしたいと思います!

そんな記事は他にもたくさんあったんだけど、なんせ初心者なもんで文字ばっかり並んでて、記事読むのが辛かった。。

Bootstrap4導入後の完成形はこれです。

手順

  1.  (コマンドで)bootstrap-vueインストール
  2.  app.jsにimportする
  3.  Vueインスタンスに入れ込む

1. bootstrap-vueインストール

npm install vue bootstrap-vue botstrap

2. app.jsにimportする

/**
* First we will load all of this project's JavaScript dependencies ... (中略)
*/
 
import BootstrapVue from "bootstrap-vue" // ★追加
import 'bootstrap/dist/css/bootstrap.css' // ★追加
import 'bootstrap-vue/dist/bootstrap-vue.css' // ★追加
 
require('./bootstrap');
 
window.Vue = require('vue');

3. Vueインスタンスに入れ込む

...(中略)
 
import Vue from 'vue'
import router from './router'
import App from './App.vue'
 
new Vue({
  el: '#app',
  router,
  BootstrapVue, // ★追加
  components: { App },
t  emplate: '<App />'
});

bootstrapが適応されているか確認する

※<input class=”form-control”>

※<button class=”btn”>

inputのclassにform-controlを追加して入力欄がまるっぽくなっているか、buttomのclassにbtnを追加して今風の丸っぽいボタンになっているか

npm run dev

php artisan serve

良きです♡       

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です