皆さんこんにちは！底辺プログラマーのヤスです！
前回に引き続きvue.jsの記事を作成していきます。
ちょっと急ぎで必要になったので先にBootstrapを導入していきます。
前回の記事の続きとなっていますのでもしよければそちらもご覧ください。
Contents
Bootstrap-vueをインストールする
下記のコマンドでインストールを行います。
|
1 |
npm install bootstrap-vue |
インストールができているかどうか一応確認を行います。
下記のコマンドでバージョン確認を行います。
|
1 2 3 |
npm list bootstrap-vue `-- bootstrap-vue@2.1.0 |
上記のようにバージョンが表示されていればインストール完了です。
src/index.jsでBootstrapをインポート
src/index.jsでBootstrapをインポートしていきます。
routerを使用している場合はrouter/index.jsでインポートしてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import Vue from 'vue' import App from './App' import BootstrapVue from 'bootstrap-vue' import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' Vue.use(BootstrapVue) Vue.config.productionTip = false new Vue({ el: '#app', components: { App }, template: '<App/>' }) |
cssの読み込みを行うためにstyle-loaderとcss-loaderをインストールします。
|
1 |
npm install style-loader css-loader |
続いてwebpack.config.jsを編集します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
const path = require('path') const { VueLoaderPlugin } = require("vue-loader") module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', } }, module: { rules: [ { test: /\.vue?$/, loader: 'vue-loader' }, { test: /\.css$/, loader: 'style-loader!css-loader' } ] }, plugins: [new VueLoaderPlugin()] } |
これでbootstrapの.cssファイルを読込めるようになりました。
Bootstrapが機能しているかどうか確認するためにApp.vueを編集します。
|
1 2 3 4 5 6 |
<template> <div id="app"> <b-button variant="danger">danger</b-button> </div> </div> </template> |
以上でファイル編集は終了です！
結果を確認する
ビルドしたのち、index.htmlをブラウザ上で表示してみてください。
こんなボタンが表示されていれば成功です！
まとめ
今回は最小構成のvue.jsにBootstapを導入するために記事となっています。BootstrapはVue.jsに限らずTypeScriptやAngulerでも使用することができますので、フロントのお仕事の方は必須のスキルなのではないでしょうか。
今回の記事は以上となります。
ちょっと仕事の都合上先にBootstrap導入の記事を作成しました。
次は今度こそmxGraphを乗せることろまでを記事にしたいと思います。
最後まで読んで頂きありがとうございます。
