Vue中使用自适应屏幕响应式的导航栏NavBar组件

组件效果： PC端： 手机端（下拉菜单）：

1 安装

# With npm
npm install vue bootstrap-vue bootstrap

# With yarn
yarn add vue bootstrap-vue bootstrap

版本在package.json中修改为：

"bootstrap": "^4.6.1",
"bootstrap-vue": "^2.21.2",

执行npm install

2 配置

在main.js中添加

// app.js
import {
          
    BootstrapVue, IconsPlugin } from bootstrap-vue

// Install BootstrapVue
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)


// app.js
import bootstrap/dist/css/bootstrap.css
import bootstrap-vue/dist/bootstrap-vue.css

3 代码

创建一个组件：

在其他页面中使用(注意路径引用)：

<template>
    <div class="index">
        <Header></Header>
        <!-- <div style="width:100%;height:56px"></div>
        <router-view></router-view> -->
    </div>
</template>
<script>
import Header from ../../components/f/Header.vue
export default {
          
   
    name:index,
    components:{
          
   
        Header
    }

}
</script>
<style>

</style>