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

Question

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

我已经使用Webpack和CLI安装了Vue js 2。

在src文件夹中，我具有以下结构。

• 资产
• 组件
• 路由器
• 应用程序
• 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无效时。

如果我做错了方法，请指导我。

提前致谢。

Answer 1

如果你的About和Contact的路线是儿童AppContainer你需要放置一个<router-view></router-view>在AppContainer

像这样的AppContainer.vue

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

        <router-view></router-view>

   </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>