使用bootstrap-vue将bootstrap与vue.js集成

>本文使用bootstrap-vue探讨了与vue.js集成的bootstrap，从而消除了对jQuery的需求。 React和Vue.js是流行的JavaScript框架，但Vue.js拥有更简单的学习曲线和设置。 Bootstrap是一种广泛使用的HTML/CSS框架，传统上依赖于jQuery。 bootstrap-vue桥接此差距。

Bootstrap-vue的

关键优点：>

>将bootstrap和vue.js结合在一起，使用bootstrap组件作为vue组件。
>可通过NPM安装，为项目脚手架提供Vue-CLI模板。
可以通过脚本标签包含，简化设置。
• 支持动态组件和事件处理的vue.js指令。
>
• Bootstrap的背景

：

Bootstrap由Mark Otto和Jacob Thornton创建，Bootstrap由于其移动响应设计，常见的UI组件和广泛的浏览器支持而迅速获得了知名度。 它已成为新的Web项目的标准。

连接bootstrap和vue.js：

> Bootstrap对jQuery的依赖与Vue.js的直接集成复杂化。 Bootstrap-vue和Vuestrap是解决方案，Bootstrap-vue是最新和流行的选择。

详细介绍bootstrap-vue： Bootstrap-vue

>命令行安装（NPM）：

这将创建一个使用>模板的新项目。

>导入引导程序和bootstrap-vue样式和组件。

包含前端代码。

npm i bootstrap-vue
npm i -g vue-cli
vue init bootstrap-vue/webpack-simple getting-started
cd getting-started
npm install
npm run dev

脚本标签安装：

webpack-simple main.js>另外，在您的html中通过脚本标签包括Bootstrap-vue：App.vue

考虑用于旧的浏览器支持。

>

与Bootstrap-Vue组件一起工作：

>

>使用Codepen的示例演示创建警报和列表视图。

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css"/>
<🎜>
<🎜>

警报组件：

@babel/polyfill

这会产生不可否认的警报。 有关进一步的自定义选项，请参阅Bootstrap-Vue文档。

>

>动态列表视图组件：

使用>和

<b-alert show dismissible>Hello {{ name }}!</b-alert>

指令创建一个动态列表：

npm i bootstrap-vue
npm i -g vue-cli
vue init bootstrap-vue/webpack-simple getting-started
cd getting-started
npm install
npm run dev

徽章上的事件处理：

>

<b-badge>可以与事件侦听器一起使用：

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css"/>
<🎜>
<🎜>

这会在按钮上递增共享计数器。

结论： > bootstrap-vue简化了将引导程序集成到vue.js项目中，为构建响应式和动态的Web应用程序提供了强大的组合。 提供的示例和进一步资源的链接使开发人员能够快速启动。

>

常见问题（常见问题解答）：

> FAQS部分在原始文本中已经写得很好，并且已经写得全面。 不需要更改。

以上是使用bootstrap-vue将bootstrap与vue.js集成的详细内容。更多信息请关注PHP中文网其他相关文章！