如何在vue cli项目的index.html中使用Navbar vue组件？

我刚开始使用。 Vue 2.0 cli。该项目目录的创建和我的index.html文件看起来是这样的：如何在vue cli项目的index.html中使用Navbar vue组件？

<body class="drawer drawer--top"> 
<header class="drawer-navbar" role="banner" id="navbar"> 
    <Navbar></Navbar> 
</header> 

<div id="app"> 
</div> 
</body>

的Hello成分（Vue的CLI创建）在div#app呈现。但我想在header#navbar中呈现我的Navbar组件。我为导航栏使用http://git.blivesta.com/drawer/插件。在任何地方使用它，但'头'弄乱了导航栏。如何实现这个功能？

来源

2016-10-16 Shubham Sinha

我的回答有帮助Shubham吗？ –

Navbar组件需要位于应用程序div的内部。

你应该做的是有一个根组件更换Hello.vue称为像App.vue

里面App.vue有：

<header class="drawer-navbar" role="banner" id="navbar"> 
    <Navbar></Navbar> 
</header> 
<router-view></router-view>

然后使用VUE路由器，以显示你的其他路线，并且标题将粘在您显示的所有页面的顶部。本质上'App.vue'将是您的应用程序的布局文件。

来源

2016-10-16 18:25:56

如何在vue cli项目的index.html中使用Navbar vue组件？

回答

相关问题