如何将我的Bootstrap模板集成到vue js中

我是Vue js的新手 . 我想将我现有的Bootstrap模板集成到vue js中 .

我已经使用CLI与Webpack安装了Vue js 2 .

在 src 文件夹里面我有以下结构 .

• 资产

• 组件

• 路由器

• App.vue

• main.js

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import AppContainer from '@/components/AppContainer'
import Contact from '@/components/Contact'
import About from '@/components/About'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'AppContainer',
      component: AppContainer,
      children: [
        {
          path: '/about',
          alias: '',
          component: About,
          name: 'About',
          meta: {description: 'Overview of environment'}
        }, 
        {
          path: '/contact',
          alias: '',
          component: Contact,
          name: 'Contact',
          meta: {description: 'Overview of environment'}
        },
      ]
    }
  ]
})

App.vue

<template>
  <div id="app">
    <!-- <router-link :to="{ name: 'About' }">About</router-link>
    <router-link to="/contact">Contact</router-link> -->
    
    <router-view/>
  </div>
</template>

<script>

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

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

component/AppContainer.vue


<template>
    <div class="full">
        <h1> Container </h1>
        <Navigation> </Navigation>
    </div>
</template>

<script>
    import Navigation from '@/components/Navigation'
    
    export default {
        name: 'full',
        components: {
            Navigation,
          
        },
        data () {
            return {
            nav: Navigation.items
            }
        },
        computed: {
            name () {
            return this.$route.name
            },
            list () {
            return this.$route.matched
            }
        }
}
</script>
</script>

component/Navigation.vue


<style>

</style>

<template>
  <div id="app-layout">
      <router-link to="/about"> About </router-link>
      <router-link to="/contact"> Contact </router-link>
       
  </div>
</template>

<script>
export default {
  name: 'Navigation',
  data () {
    return {
      nav: 'This is nav'
    }
  }
}
</script>

并且在Contact和About组件中有简单的视图 . 但是当尝试路由id时不起作用 .

如果我做错了，请指导我 .

提前致谢 .