エソラフロントエンドの開発をする際、CSSを設定するの面倒くさくないですか？
すごく時間をかけてCSSを設定したのに、出来たのはショボいレイアウトだったということもあります。
パッと綺麗な画面が作れたら、どんなに便利でしょうか？
ということで、今回はCSSフレームワークであるBootstrapをVue.jsで使用する方法を記載します。
エソラBootstrapを利用したら、綺麗なレイアウトを簡単に作成することが出来ます。
ということで、使い方を知ればすごくフロントエンドエンジニアとしてのレベルが上がります。
ぜひ、この機会に使い方を確認して下さい！では、いきましょうー！
Vueプロジェクトを作成する
まずはBootstrapを乗っける、Vueプロジェクトを作成します。
Vue CLIのインストール
以下の通り、Vue CLIをインストールします。
Vue CLIとは、コマンドラインでVue.jsのプロジェクトを作成するための開発ツールです。
インストールのためには、以下のコマンドを入力します。
# npmの場合
$ npm install -g @vue/cli @vue/cli-service-global
# yarnの場合
$ yarn global add @vue/cli @vue/cli-service-globalこれで、Vue CLIがインストール出来ました！
Vueプロジェクトをコマンドで作成する
では、先程インストールしたVue CLIを使って、Vueプロジェクトを作成します！
以下のコマンドを入力して下さい！
$ vue create vue-bootstrap-sample
# 上記のコマンドを打つと、以下の設定で良いか確認されるので、良ければEnterを押す
? Please pick a preset: default (babel, eslint)すると、カレントディレクトリの直下に「vue-bootstrap-sample」というフォルダが出来ていると思います。
これがVueプロジェクトとなります。
試しに以下のコマンドを入力して、Vueプロジェクトを起動してみましょう。
# ディレクトリを移動して...
$ cd vue-bootstrap-sample/
# 起動コマンドを入力
$ npm run serve
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.1.3:8080/よくコマンド入力後のメッセージを確認すると、上記のようにアクセスするためのアドレスが出てきますので、ブラウザにURLを打ち込みます。
すると、下記のようにWelcome画面が出たと思います！
これでVueプロジェクトの準備が完了しました。
VueプロジェクトにBootstrapを適用する
では、実際にここからはBootstrapを使用していくための設定をしていきます。
まずは、ライブラリのインストールです。以下のコマンドを入力します。
(Vueアプリを立ち上げたままの場合は、コマンド入力の前に「Ctrl + C」を押して下さい)
# npmの場合
$ npm install vue bootstrap-vue bootstrap
# yarnの場合
$ yarn add vue bootstrap-vue bootstrapインストールが成功している場合は、以下のようにpakage.jsonに「bootstrap」と「bootstrap-vue」が追加されています。
{
略
"dependencies": {
"bootstrap": "^4.4.1",
"bootstrap-vue": "^2.12.0",
"core-js": "^3.6.4",
"vue": "^2.6.11"
},
略
}それでまた再度、Vueプロジェクトを起動して、URLにアクセスします。(コマンドは前述)
これ以降の修正内容はブラウザにリアルタイムに反映されていくので、確認しながらやってみて下さい。
次に、main.jsを以下のように修正します。
import Vue from "vue";
import App from "./App.vue";
import { BootstrapVue, BootstrapVueIcons } from "bootstrap-vue"; // 追加
import "bootstrap/dist/css/bootstrap.css"; // 追加
import "bootstrap-vue/dist/bootstrap-vue.css"; // 追加
Vue.use(BootstrapVue); // 追加
Vue.use(BootstrapVueIcons); // 追加
Vue.config.productionTip = false;
new Vue({
render: (h) => h(App),
}).$mount("#app");
これでBootstrapを使うための設定が出来ました。
Bootstrapを使ってみる！
では、適当にBootstrapを使ってレイアウトを作ってみて、ちゃんとBootstrapが適用されているか確認してみましょう！
まずはApp.vueを綺麗にします。
<template>
<div id="app">
<HelloWorld />
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
name: "App",
components: {
HelloWorld,
},
};
</script>
<style></style>そして以下のようにHelloWorld.vueを修正します。
この例ではNavbarとTableを作っています。
<template>
<div>
<b-navbar toggleable="lg" type="dark" variant="info">
<b-navbar-brand href="#">NavBar</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item href="#">Link</b-nav-item>
<b-nav-item href="#" disabled>Disabled</b-nav-item>
</b-navbar-nav>
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto">
<b-nav-form>
<b-form-input
size="sm"
class="mr-sm-2"
placeholder="Search"
></b-form-input>
<b-button size="sm" class="my-2 my-sm-0" type="submit"
>Search</b-button
>
</b-nav-form>
<b-nav-item-dropdown text="Lang" right>
<b-dropdown-item href="#">EN</b-dropdown-item>
<b-dropdown-item href="#">ES</b-dropdown-item>
<b-dropdown-item href="#">RU</b-dropdown-item>
<b-dropdown-item href="#">FA</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown right>
<!-- Using 'button-content' slot -->
<template v-slot:button-content>
<em>User</em>
</template>
<b-dropdown-item href="#">Profile</b-dropdown-item>
<b-dropdown-item href="#">Sign Out</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-collapse>
</b-navbar>
<b-table striped hover :items="items"></b-table>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String,
},
data() {
return {
items: [
{ age: 40, first_name: "Dickerson", last_name: "Macdonald" },
{ age: 21, first_name: "Larsen", last_name: "Shaw" },
{ age: 89, first_name: "Geneva", last_name: "Wilson" },
{ age: 38, first_name: "Jami", last_name: "Carney" },
],
};
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
ここまでやった上で、ブラウザを確認すると、以下のようになります。
これでBootstrapの適用確認は終わりです！
最後に
パパっと綺麗なレイアウトを作れるBootstrapは非常に強力だと思いました。
NavbarやTable以外にも、FormやAlert等まだまだレイアウトのパーツがあります。
これ以上の詳しい内容は、bootstrap-vueの公式リファレンスを参照して下さい。
公式リファレンスにはサンプルも豊富にありますので、きっと簡単に綺麗なレイアウトを作れると思います。
またフロントエンドエンジニアとしてスキルアップしたい場合は、以下の記事が参考になりますので、ご興味あればご確認下さい。
ここまでお読みいただき、ありがとうございました。
＼ 更新の励みになるので、ポチッとしてね ／
エソラ他にもスキルアップやキャリアアップの役に立つ情報が満載です。他の記事も読んで、ゆっくりしていってね！
フロントエンドのおすすめ勉強方法
エソラフロントエンドの勉強をするなら、Udemyの講座がおすすめです。
- 学習コンテンツ量が多いので、未経験から現場で活躍するレベルまで幅広い
- 疲れていても、動画で楽に学習出来る
- 疑問を気軽に聞けるQAシステムがあり、初心者でも安心
- セールが多数開催されるので、Udemy
の料金は技術書よりも安い場合がある - 30日以内なら、返金も可能
まとめると、「動画で楽に勉強が出来て、質問も出来て、しかも安い」という点が、Udemy
の魅力です。
フロントエンドのオススメ講座は以下の通り。
- フロントエンドの知識が全くないという初心者向け
- フロントエンドの知識がある程度ついてきた中級者向け
- UI開発に特化したJavaScriptライブラリの使い方を学びたい人向け
- 現場に出る前にチーム開発に必要なスキルの基礎を学びたい人向け
各講座の詳細については、以下で完全理解できます。
エソラ効率の良い勉強方法で、楽にスキルアップしましょう。
コメント