Vue2项目中的Bootstrap如何使用

一.依赖导入

利用npm导入依赖,具体版本号可以区Bootstrap官网查看 Bootstrap 

npm install [email protected]

二.导入包（注意Bootstrap的css和js文件需要单独引入）

在vue项目目录下找到main.js文件,在里面引入Bootstrap的css和js文件,样例如下图所示。

import Vue from 'vue'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.min'


Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

三.CV环节

访问Bootstrap官网,Bootstrap提供了大量写好的框架,只需找到想要的样式,把对应的代码粘贴到vue组件中的template标签之中即可,如下图. 复制的是一个导航栏的代码。

运行效果如图所示,css和js都没问题。

官网还有很多组件,这里就不一 一展示了。