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>