BootStrapVue的使用

矫情吗；* 2022-12-20 12:55 127阅读 0赞

## 1.创建一个Vue项目 ##

vue create vue-blog

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ_size_16_color_FFFFFF_t_70_pic_center]

## 2.运行Vue项目 ##

npm run serve

出现以下界面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ_size_16_color_FFFFFF_t_70_pic_center 1]

## 3.安装BootstrapVue依赖 ##

cnpm install bootstrap-vue bootstrap

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ_size_16_color_FFFFFF_t_70_pic_center 2]

## 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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ_size_16_color_FFFFFF_t_70_pic_center 3]  
发现Bootstrap的样式已经生效

详情可见[BootstrapVue官网][BootstrapVue]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/3210605f03b74aaa8eccd709ae33a330.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/303fd295e8e1494c91b05c84348975fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/1bf94692dd0c423c9c356b93fab8f183.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/1a1dc627b138407c855f8190514dc29a.png
[BootstrapVue]: http://code.z01.com/bootstrap-vue/