BootStrapVue的使用

1.创建一个Vue项目

vue create vue-blog

在这里插入图片描述

2.运行Vue项目

npm run serve

出现以下界面
在这里插入图片描述

3.安装BootstrapVue依赖

cnpm install bootstrap-vue bootstrap

在这里插入图片描述

3.引入BootstrapVue和 Bootstrap CSS

在main.js中引入以下代码

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

4.使用Bootstrap4的组件

修改HelloWorld.Vue中的代码

<template>
  <div class="alert alert-primary" role="alert">
    A simple primary alert—check it out!
  </div>

</template>

在这里插入图片描述
发现Bootstrap的样式已经生效

详情可见BootstrapVue官网

猜你喜欢

转载自blog.csdn.net/rj2017211811/article/details/109649333