vue-cli2로 개인 비즈니스 페이지를 만들었습니다.

npm install -g vue-cli

 vue init webpack codelike2018

bower install bootstrap4 --save
bower install open-iconic --save

{
  "directory":"src/library"
}

"dependencies": {
  "axios": "^0.18.0", /*--wpとのajax通信のため--*/
  "vue-carousel": "^0.8.1", /*--トップページがさみしいのでカルーセルで画像流す用--*/
  "vue-js-modal": "^1.3.15", /*--モーダル画面を表示するため(簡単につかえて便利)--*/
}

import Vue from 'vue'
import Router from 'vue-router'
import Top from '@/components/Top'
import About from '@/components/About'
import Profile from '@/components/Profile'
import Service from '@/components/Service'
import Contact from '@/components/Contact'
import Blog from '@/components/Blog'
import NotFound from '@/components/NotFound'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Top',
      component: Top
    },
    {
      path: '/about',
      name: 'About',
      component: About
    },
    {
      path: '/service',
      name: 'Service',
      component: Service
    },
    {
      path: '/profile',
      name: 'Profile',
      component: Profile
    },
    {
      path: '/contact',
      name: 'Contact',
      component: Contact
    },
    {
      path: '/blog',
      name: 'Blog',
      component: Blog
    },
    {
      path: '/404',
      name: 'NotFound',
      component: NotFound
    },
    {
      path: '*',
      redirect: { name: 'NotFound' }
    }
  ]
})

<template>
  <div id="app">
    <div class="d-md-none">
      <div class="row">
        <div class="col-12">
          <SmartphoneNav />
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-2 d-none d-md-block">
        <nav class="col-md-2 h-100 sidebar" style="position:fixed;">
          <SideNav />
        </nav>
      </div>
      <div class="col-md-10 col-xs-12 col-sm-12">
        <transition name="fade">
          <router-view />
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import './library/bootstrap4/dist/css/bootstrap.css'
import './library/open-iconic/font/css/open-iconic-bootstrap.css'
import SideNav from './components/SideNav'
import SmartphoneNav from './components/SmartphoneNav'

export default {
  name: 'App',
  components: { SideNav, SmartphoneNav }
}
・・・省略・・・

    <carousel :per-page="1" :loop="true" :autoplay="true">
      <slide>
        <img src="../assets/topimg_1.jpg" class="w-100 h-100">
      </slide>
      <slide>
        <img src="../assets/topimg_2.jpg" class="w-100 h-100">
      </slide>
      <slide>
        <img src="../assets/topimg_3.jpg" class="w-100 h-100">
      </slide >
    </carousel>

    <modal name="send_message" id="send_message" width="80%" height="200">
      <div class="send_message_box">
        お問い合わせありがとうございました、送信完了しました。<br>
        内容確認後、折り返し連絡いたします。<br>
        <button class="btn btn-primary btn-block mt-5" v-on:click="closeDialog">閉じる</button>
      </div>
    </modal>

  mounted () {
    this.$modal.show('pre_load')
    axios.get('http://blog.codelike.info//wp-json/wp/v2/posts').then(response => (this.blogData(response.data)))
  }