npm install bootstrap
出现bug
npm WARN ajv-keywords@3.4.0 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN bootstrap@4.3.1 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
npm WARN bootstrap@4.3.1 requires a peer of popper.js@^1.14.7 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
解决
npm install ajv@^6.9.1
npm install jquery@1.9.1
npm install popper.js@^1.14.7
npm install bootstrap
接着执行命令
npm install sass-loader bootstrap node-sass --save
运行后修改App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style lang="scss">
@import "~bootstrap/scss/bootstrap.scss";
#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>
接着修改后,运行测试
<template>
<div id="app">
<img src="./assets/logo.png">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style lang="scss">
@import "~bootstrap/scss/bootstrap.scss";
#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>
看到navbar 就是成功了
bootstrap navbar官方地址
https://getbootstrap.com/docs/4.3/components/navbar/
下面我们来实现vue+bootstrap切换页面
vue router-link 地址
https://router.vuejs.org/zh/api/#router-link-props
简化App.Vue代码
<template>
<div id="app">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Hello 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Hello 2</a>
</li>
</ul>
</div>
</nav>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style lang="scss">
@import "~bootstrap/scss/bootstrap.scss";
</style>
我们实现点击Hello 1跳转HelloWorld 点击Hello 2 跳转Hello 2 的逻辑
我们重点就处理这里就好了
<li class="nav-item active">
<a class="nav-link" href="#">Hello 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Hello 2</a>
</li>
改为
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<!--<a class="nav-link" href="#">Hello 1</a>-->
<router-link class="nav-link" :to="'/'">Hello 1</router-link>
</li>
<li class="nav-item">
<!-- 不写 v-bind 也可以,就像绑定别的属性一样 -->
<router-link class="nav-link" :to="'hello2'">Hello 2</router-link>
<!--<a class="nav-link" href="#"></a>-->
</li>
</ul>