vue中使用bootstrapvue

参考网站：

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相关推荐

vue中使用bootstrap4踩坑之旅
bootstrapvue官网 bootstrap4中文官网以下文章记录本人的踩坑过程,最后已亲测有效,但不保证是最简便的方法,最好的建议是去bootstrapvue官网看文档直接尝试. 一.引入jq ...
如何在 Vue 中导出数据至 Excel 表格 - 卡拉云
本文首发:<如何在 Vue 中导出数据至 Excel 表格 - 卡拉云> 我们经常需要在 Vue 搭建的后台管理系统里导出数据到 Excel / CSV ,方便我们将数据共享给其他同学或在 ...
怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...
props写法_简单理解vue中Props属性
本文实例为大家解析了vue中Props的属性,供大家参考,具体内容如下使用 Props 传递数据组件实例的作用域是孤立的.这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.可以使用 pr ...
vue ts 设置tslint提示_Typescript 在 Vue 中的实践(包含2.x、3.x)
1 使用 typescript 的优势聊到 ts 时有一个不能规避的问题:为什么要使用 ts ,相比 js 有什么优势吗?下面我从两个方面试着回答一下这个问题: 1.1 项目开发时的便利避免低级 ...
VUE中使用Echarts绘制地图迁移
踩坑说明很久以前写jsp时使用过echarts的china.js插件,不过echarts是2.0的,目前vue项目中使用echarts3.8.5,直接将china.js插件引入,代码复制,运行一看, ...
vue中动态样式不起作用？ scoped了解一下
vue中style标签使用属性scoped的注意事项 style上添加属性scoped可以实现样式私有化,但是在使用动态样式时,样式会不起作用.可以先去掉scoped 转载于:https://www. ...
Vue中组件数据的传递
Vue中组件的作用域是隔离的,父组件中的数值子组件看不到!也就是说,用angular作比喻,组件的scope天生是scope:()的! 如果父组件需要往子组件中传数据,此时应该使用标签属性: < ...
vue中静态文件引用注意事项
(一)assets文件夹与static文件夹的区别区别一:assets文件是src下的,所以最后运行时需要进行打包,而static文件不需要打包就直接放在最终的文件中了区别二:assets中的文件 ...

vue中使用bootstrapvue

vue中使用bootstrapvue相关推荐

最新文章

热门文章