kz’s blog

興味のあることについて書いていきます。

Vue UI で Bootstrap を導入しデザインを変更する

バージョン確認

$ node -v
v10.6.0

$ npm -v
6.1.0

$ vue --version
3.0.0-rc.10

プロジェクトの作成

Vue UI にてプロジェクトを作成し、起動ができるところまで進みます。

www.kz62.net

Bootstrap インストール

Vue UI 管理画面 > 依存 > +インストール依存

f:id:kz62:20180815052608p:plain

bootstrap-vue をインストールします。

ソースコード修正

Bootstrap を使用する準備

src/main.jsimport します。

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue);

bootstrap をインポート · kz62123/sample@924541d · GitHub

Bootstrap を使用するコンテンツを配置する。

src/App.vue にボタンを設置します。

<b-button variant="success">button</b-button>

ボタン設置 · kz62123/sample@cb2d819 · GitHub

Bootstrap を使用する場合、タブはbuttonではなくb-buttonにするところがポイントです。

確認

これで画面を表示させると Vue のロゴの近くにボタンが設置されているかと思います。

f:id:kz62:20180815052708p:plain