(導入からテーブル表示編)Tech開発Divのeciです。Vue今回はNuxt.jsでBootstrap4(Bootstrap-Vue)を使ってみようと思います!なぜBootstrapなのかですか?今はVueを勉強中なので、デザインは使い慣れたもの一択だっただけです...前回と同様に、Nuxt.jsのインストールから始めます。「HelloWorld」大切です。hello-bvpackage.jsonの作成helloディレクトリ直下にpackage.jsonを作ります。pagespagesディレクトリに、index.vueを作ります。devブラウザで「localhost:3000」に行くと、「hello-bv」と表示されると思います。ここからが今回のメインです。bootstrap-vueたったこれだけで準備は完了です。試しにindex.vueを変えてみましょうpage/index.vueの編集Badgeを追加してみます。dev「New!」のBadgeが表示されましたか?されましたよね?されたとしましょう。本当はココまでだったのですが、査読者に怒られてしまいましたので、もう少し頑張りますTable表示編データの作成まずはデータを作りましょう。index.vueのscriptタグにitems配列だけを返す、dataメソッドを定義します。}</script>テーブルの定義index.vueのtemplate部分を↓のように書き換えます。<b-table>タグを追加するだけです。各カラムの表示/非表示を制御したり、フォーマットを変更したい時は、↓のようにします。}</script>次に、<b-table>タグに、「:fields="fields"」を追加してください。</div></template>これまでと変わりなく表示されていると思います。頑張ります見出し行を変えるこのままですと、日本人にあまり優しくないです。日本人フレンドリーに見出し行を変えてみましょう。</div></template>日本人に優しくなりましたか?ただ、このままですとまだ職場の先輩に怒られてしまいます。数字項目の部分を修正しましょう。金額項目の対応を行う3桁ごとにカンマを入れて、右寄せします。fieldsのpriceカラムの設定のところに、formatterメソッドとtdClassを定義します。}</script>完成です!ドヤ顔で先輩に出来ました報告してみてください。まとめBootstrap-Vueは、ドキュメントもかなり揃っていて、あまり困ることはありませんでした。実戦投入しても問題ないレベルなのではないでしょうか?これから色々なComponentを試して行きたいと思います。(続・テーブル表示編)開発Divのeciです。Kaggleコンペに参加してみました。引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。