SPAをとくにかく簡単に作ってみる(vue.js / axios / router / vuex / bootstrap)

$ vue init webpack spa-sample

$ cd spa-sample
$ cd npm run dev

$ npm install vue-router
$ npm install vuex
$ npm install axios
$ npm install bootstrap-vue
$ npm install vuex-router-sync

spa-sample
   |-src
      |-main.js
      |-App.vue
      |-router.js (新規作成)
      |-aasets
      |-components
      |-pages(新規作成)
         |-Home.vue(新規作成)
         |-Sub.vue(新規作成)

import Vue from 'vue';
import VueRouter from 'vue-router';

import Home from '@/pages/Home.vue';
import Sub from '@/pages/Sub.vue';

Vue.use(VueRouter);

var router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/sub',
      component: Sub
    },
  ]
});

export default router;

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router.js'
import axios from 'axios'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import Vuex from 'vuex'
import {sync} from 'vuex-router-sync'

Vue.use(BootstrapVue)
Vue.use(Vuex)

Vue.config.productionTip = false
Vue.prototype.$axios = axios

const store = new Vuex.Store({
  state:{
    count:0
  },
  mutations:{
    increment(state, amount){
      state.count += amount
    }
  },
  actions:{
    plus (context) {
      context.commit('increment', 1)
    }
  }
})
export default store
sync(store ,router)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router: router,
  components: { App },
  template: '<App/>'
})

<template>
  <div id="home">
    <div>
      <h2>Home</h2>
      <b-button
        size="lg"
        variant="outline-primary"
        @click="log"
      >
        Log
      </b-button>
      <b-button
        size="lg"
        variant="outline-primary"
        @click="plus1"
      >
        +1
      </b-button>
    </div>
  </div>
</template>

<script type="text/javascript">
  export default {
    name: 'Home',
    data() {
      return {
      }
    },
    methods: {
      log() {
        console.log(this.$store.state.count)
      },
      plus1() {
        this.$store.dispatch('plus')
      }
    }
  }
</script>

<style scoped>
</style>

<template>
  <div id="ip">
    <div>
      <h2>Sub</h2>
      <p>ここに郵便番号1000001の住所が表示します</p>
      <p>{{address}}</p>
      <div>
        <b-button
          size="lg"
          variant="outline-primary"
          @click="getAddress"
        >
        取得
        </b-button>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
  export default {
    name: 'Sub',
    data() {
      return {
        address: ''
      }
    },
    methods: {
      getAddress() {
        this.address = '住所を取得しています';
        this.$axios.get('https://api.zipaddress.net/?zipcode=1000001')
          .then((response) => {
            this.address = response.data.data.fullAddress;
            console.log(response)
          })
          .catch((reason) => {
            this.address = '取得に失敗しました';
          });
      }
    }
  }
</script>

<style scoped>
</style>