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"):
Search Github Users
提交
Comment
×
Name
Email address
Comment
Close
Submit
Not Comment!