使用 bootstrap-vue

1.创建一个vue项目

vue create demo1

网慢的话可以使用cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

**2.下载bootstrap-vue和 bootstrap**

```bash
cnpm install bootstrap-vue bootstrap axios

3.在项目公共文件夹中的index.html文件中添加如下代码：

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css"/>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

4.main.js中引入

import $ from 'jquery'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

5.app.js测试

<template>
	<div id="app">
		<b-row class="header">
			<b-col cols="4">
				<!-- <b-img :src="require('./assets/logo.png')" :fluid="true" alt="Rounded image"></b-img> -->
			</b-col>
			<b-col cols="8">
				<b-nav>
					<b-nav-item v-b-toggle.sidebar-1>侧边导航</b-nav-item>
					<b-nav-item active>
						<router-link to="/">首页</router-link>
					</b-nav-item>
					<b-nav-item>
						<router-link to="/about">关于我们</router-link>
					</b-nav-item>
					<b-nav-item>
						<router-link to="/qita">其它</router-link>
					</b-nav-item>
					<b-nav-item disabled>禁用</b-nav-item>
				</b-nav>
			</b-col>
		</b-row>
		<b-sidebar id="sidebar-1" title="导航" shadow>
			<div class="px-3 py-2">
				<div id="nav">
					<router-link to="/">首页</router-link>
					<router-link to="/about">关于我们</router-link>
					<router-link to="/qita">其它</router-link>
				</div>
			</div>
		</b-sidebar>
		<router-view />
	</div>
</template>
<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			getMeal() {
				console.log("成功了吗")
			}
		}
	}
</script>
<style>
	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
		font-size: 18px;
	}

	#app .header {
		box-sizing: border-box;
		padding: 20px;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	#app .header .col-8 a {
		color: #333;
	}
	#app .header .col-8 a.router-link-exact-active {
		color: #42b983;
	}
	#app .header .col-8 .disabled{
		color: #C1C4C5;
	}

	#nav {
		box-sizing: border-box;
		padding: 30px;
		display: flex;
		flex-direction: column;

	}

	#nav a {
		box-sizing: border-box;
		margin: 10px 0;
		padding: 10px;
		display: block;
		width: 100%;
		font-weight: bold;
		color: #333;
		font-size: 12px;
		background-color: wheat;
	}

	#nav a.router-link-exact-active {
		color: #42b983;
	}
</style>

原文链接：https://blog.csdn.net/weixin_34092370/article/details/91479662?biz_id=102&utm_term=bootstrap-vue&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduweb~default-0-91479662&spm=1018.2118.3001.4187