虽然前端程序发展迅速，各种框架层出不穷，但对于广大非前端编码人员来说，搭建Web界面的最佳选择仍然是Bootstrap 4。但是Bootstrap依赖于严重过时和废弃的jQuery组件，如何解决这个问题迫在眉睫。
Vue项目因其轻量级、高性能、易用性、双向数据绑定、组件化等特点而广受欢迎和广泛应用。那么有没有可能改变Bootstrap对Vue的依赖？答案是肯定的。
本文介绍了这样一个解决方案，Bootstrap-Vue项目。
Setup和Setup Bootstrap-Vue项目提供了Bootstrap项目中jQuery组件的替换方案，依赖于Vue，可以替换大部分案例和组件。我们建议使用Vue Cli插件，它可以自动创建和配置项目，并添加依赖项。首先，我们安装Vue Cli。
由于npm安装缓慢，Vue Cli的安装甚至可能会失败。需要先安装国产镜像，可以用cnpm或者npm作为另一个名称：
然后用cnpm安装vue.js
cnpm install -g @vue.js
创建项目vue创建hello-chongchong
这样，Vue CLI将自动创建一个Vue项目，提示选择一个项目，并选择“默认”。
输入项目目录：
Cd hello-chongchong使用以下命令将Bootstrap-Vue插件添加到项目中。出现提示时，选择“y”。
Vue add Bootstrap-Vue这样你就可以建立一个以vue开始的Bootstrap项目，而不需要任何复杂的设置。
默认情况下，Vue CLI为。没用，直接清除吧，包括零件目录里的App.vue和HelloWorld.vue:
src/components/app . vuerm src/components/hello world . vue示例用于创建模板Bootstrap的所有函数基本上都可以作为全局注册的组件在bootstrap-vue中使用。这些组件通常与Bootstrap同名，都以b-xxxx开头以示区别。
在这里，我们创建一个新的App.vue模板并添加一个引导容器：
你好，虫虫！
然后启用该服务。
Npm运行serve，然后，当浏览器访问时，您应该看到以下内容：
此外，如果您查看页面的源代码，您会发现b容器组件是通过使用传统的引导元素和类呈现的：
你好，虫虫！
配置组件许多组件可以使用Vue props进行配置。例如，b-btn组件可以向页面添加一个按钮。-b-btn有一个变体控制按钮主题，这里设置为primary。
你好，虫虫！
ClickVue支持将动态值绑定到引导组件。例如，向b-alert组件添加一条警报消息。我们将其设定为成功，并提供一些提示。
你好，虫虫！
你点击了按钮！
您可以将showprop绑定到本地数据属性，以有条件地显示信息showAlert。然后，值b-btn会被showAlert切换，以响应组件的click事件。
你好，虫虫！
你点击了按钮！编写起来比jQuery逻辑简单得多。
Bootstrap-Vue指令一些Bootstrap函数是作为指令而不是组件提供的，所以它们可以很容易地添加到现有的元素中。
例如，要添加工具提示函数，可以使用v-b-tooltip指令。我们用指令参数hover给按钮加一个，按钮悬停时会触发。
点击：工具提示插件需要popper.js的依赖，但是用Vue CLI安装Bootstrap-Vue会自动包含它。
总结：用Bootstrap-Vue替换Bootstrap 4中的jQuery是非常容易的，并且可以带来vue cli的巨大功能优势。你可以试着把手头的项目都换掉。
