参考网站:
Getting Started | BootstrapVue
Bootstrap4中文站 · 全球最流行的 HTML、CSS 和 JS 工具库。
1.vue2版本,根据文章创建vue项目,vue.js创建网站实例1_hifhf的专栏-CSDN博客_vue.js做一个网站
2.进入demo目录,在demo项目中,添加bootstrap-vue
npm install bootstrap-vue
3.如果是vue3,可以直接创建项目(我用的vue2.9.6,没有测试过)
npx @vue/cli create demo
4.在src/main.js中添加引用
import Vue from 'vue'
import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
Vue.use(BootstrapVueIcons)
5.添加组件,打开src/components/HelloWord.vue,添加代码
<button type="button" class="btn btn-primary">Primary</button>
6.测试
npm run dev
出现蓝色按钮,表示应用bootstrap样式成功
7.jquery.js和popper.js的引用,进入demo目录
npm install jquery --save
npm install popper.js --save
修改build目录下的webpack.base.conf.js配置文件:
1)加入webpack对象:const webpack=require('webpack');
2)在module.exports里面加入以下配置:
plugins: [
new webpack.optimize.CommonsChunkPlugin('common'),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
})
]
在main.js中把jQuery,bootstrap的js和css通过import引进来
import $ from 'jquery'
import 'bootstrap/dist/js/bootstrap.min'
测试插入一个下拉菜单,如图:
成功
更多推荐
vue中使用bootstrapvue
发布评论