【Vue.js】Docker-composeでVue.jsの環境を整えてみた ~Button.vueの追加~

はじめに

こんにちは、がんがんです。年末年始はWebアプリに関する勉強を行っています。
昨日の備忘録でVue.jsの環境を構築について書きました。
gangannikki.hatenadiary.jp

今回はVue.jsの実験として新しいVueを追加してみようと思います。

目次

目的・環境

• Vueについての実験を行う。

環境は以下の通りです。

・Docker for Windows
・Vue CLI 3
・Bootstrap-Vue

ゴール

前回のこの画面が表示されるところがゴールです。

コードの修正

App.Vue

修正前

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

<style>
こちらは変更していないので省略
</style>

修正後

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <Button/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import Button from './components/Button.vue'

export default {
  name: 'app',
  components: {
    HelloWorld,
    Button
  }
}
</script>

<style>
こちらは変更していないので省略
</style>

Button.Vueを導入

/src/components/Button.Vueを追加。

<template>
  <div class="vue-button">
    <b-button variant="primary">Primary</b-button>
    <b-button variant="secondary">Secondary</b-button>
    <b-button variant="success">Success</b-button>
    <b-button variant="danger">Danger</b-button>
    <b-button variant="warning">Warning</b-button>
    <b-button variant="info">Info</b-button>
    <b-button variant="light">Light</b-button>
    <b-button variant="dark">Dark</b-button>
  </div>
</template>

<script>
export default {
  name: 'Button'
}
</script>

おわりに

今回はVue.jsのコンポーネントについて学習を行いました。意外と簡単に行えるなという印象でした。
今後はコンポーネントについての学習やRoutorの学習などをしていこうかなと思います。