vue项目中使用bootstrap4样式

2020年7月4日 18:43 by wst

bootstrap

---

前言

看过bootstrap4教程之后, 打算在vue项目中使用其样式。

经过调研，发现有集成好的插件bootstrap-vue，但看完BootstrapVue教程之后，感觉还是麻烦，组件标签变了，标签属性也变了又增加我的记忆负担。

我的目的很简单，只使用bootstrap4的样式。有如下方法：

1. 在index的head中引用bootstrap4的样式文件，代码中直接使用。

缺点：引用路径容易出问题，且最终部署是编译后的文件，路径更不容易把握；

2. 在main.js中引用css文件。

缺点：由于刚开始使用，暂未发现；

实现步骤

1. 安装vue，具体步骤这不再赘述，不会的详见vue安装教程。

2. 安装bootstrap库：npm install  bootstrap

3. 在代码（mian.js）中引入：

import Vue from 'vue'
// import {BootstrapVue, IconsPlugin} from 'bootstrap-vue'
import App from './App.vue'

// Vue.use(BootstrapVue)
// Vue.use(IconsPlugin)
Vue.config.productionTip = false

import 'bootstrap/dist/css/bootstrap.css'
// import 'bootstrap-vue/dist/bootstrap-vue.css'

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

4. 在组件Search.vue中使用样式（如：class="jumbotron"）：

<template>
    <div class="jumbotron">
            <div>
                <form>
                    <label for="exampleUsername">Search Github Users</label>
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <input type="text" class="form-control" id="exampleUsername">
                            </div>
                        </div>
                        <div class="col-6">
                            <button type="submit" class="btn border">提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
</template>

 

福利：完整代码见vue-bootstrap4

---