Vue.jsとPhpで見積りシステム（４）〜Vue.js導入 編〜

Vue.jsとPhpで見積りシステムの関連記事リスト
→Vue.jsとPhpで見積りシステム（１）〜設計・プロジェクト作成 編〜
→Vue.jsとPhpで見積りシステム（２）〜Laravel導入 編〜
→Vue.jsとPhpで見積りシステム（３）〜CORS設定 編〜
→Vue.jsとPhpで見積りシステム（４）〜Vue.js導入 編〜
→Vue.jsとPhpで見積りシステム（５）〜Vue.jsコーディング基本 編〜
→Vue.jsとPhpで見積りシステム（６）〜Vue.jsコーディング拡張 編〜
→Vue.jsとPhpで見積りシステム（７）〜バックエンドデータベース構築 編〜
→Vue.jsとPhpで見積りシステム（８）〜Laravel−Admin導入 編〜
→Vue.jsとPhpで見積りシステム（９）〜Laravel-Adminカスタマイズ 編〜

Vue.jsにaxiosを導入

axiosとはHTTP通信を扱うためのライブラリで非同期のコールバック（Promise）を簡単に扱うことがこきるライブラリです。

% npm install --save bootstrap-vue

Vue.jsにbootstrap4を導入

コーダーの味方Bootstrapを導入します。
Bootstrapを使うことで、デザインが統一されます。デザインが凝ったサイトになると物足りないかもしれませんが、素人でもそこそこきれいなデザインができますので活用します。

インストール

mitsumori-frontへ移動し

% npm install --save bootstrap-vue

設定

main.jsファイルを編集しBoo¥tstrapを有効にする。

% vi main.js

import Vue from 'vue'
import App from './App.vue'

// Botstrap-vue 読み込み
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)

Vue.config.productionTip = false

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