前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >专栏 >BootstrapVue使用入门

BootstrapVue使用入门

作者头像
全栈程序员站长
发布于 2022-09-01 08:16:32
发布于 2022-09-01 08:16:32
10.2K00
代码可运行
举报
文章被收录于专栏：全栈程序员必看全栈程序员必看
运行总次数：0
代码可运行
关联问题
换一批

大家好，又见面了，我是你们的朋友全栈君。

网站：

bootstrap-vue – npm

Getting Started | BootstrapVueGet started with BootstrapVue, based on the world’s most popular framework – Bootstrap v4, for building responsive, mobile-first sites using Vue.js

https://bootstrap-vue.org/docs

这里有一个能运行的demo实例项目：

bootstrap-vue-admin: bootstrap-vue-admin : admin management system template based on vue + bootstrap-vue + vue-router

https://gitee.com/ikaiguang/bootstrap-vue-admin

入门

开始使用BootstrapVue，它基于世界上最流行的框架 – Bootstrap v4，用于使用Vue.js构建响应迅速，移动优先的站点。

先决条件

在开始使用BootstrapVue之前，您应该熟悉Vue功能和Bootstrap v4.3 CSS。如果您不熟悉Vue和/或Bootstrap，那么好的起点将是：

在许多BootstrapVue文档中的例子，你可能会看到使用，如CSS类 ml-2，py-1等等，这是自举V4.3实用程序类。您可以在Utility Classes参考部分中找到有关这些类的信息。

使用模块捆绑包

如果您使用的是webpack， rollup.js等模块捆绑包，您可能更愿意直接将包包含到项目中。要开始使用，请使用yarn或npm获取最新版本的Vue.js，BootstrapVue和Bootstrap v4：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<span style="color:#383a42"><span style="color:#a0a1a7"><em># With npm</em></span>
npm i vue bootstrap-vue bootstrap

<span style="color:#a0a1a7"><em># With yarn</em></span>
yarn add vue bootstrap-vue bootstrap</span>

然后，在app入口点注册BootstrapVue插件：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<span style="color:#383a42"><span style="color:#a0a1a7"><em>// app.js</em></span>
<span style="color:#a626a4">import</span> Vue <span style="color:#a626a4">from</span> <span style="color:#50a14f">'vue'</span>
<span style="color:#a626a4">import</span> BootstrapVue <span style="color:#a626a4">from</span> <span style="color:#50a14f">'bootstrap-vue'</span>

Vue.use(BootstrapVue)</span>

并导入Bootstrap和BootstrapVue css文件：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<span style="color:#383a42"><span style="color:#a0a1a7"><em>// app.js</em></span>
<span style="color:#a626a4">import</span> <span style="color:#50a14f">'bootstrap/dist/css/bootstrap.css'</span>
<span style="color:#a626a4">import</span> <span style="color:#50a14f">'bootstrap-vue/dist/bootstrap-vue.css'</span></span>

或者scss通过单个自定义SCSS文件导入Bootstrap和BootstrapVue 文件：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<span style="color:#383a42"><span style="color:#a0a1a7"><em>// custom.scss</em></span>
@<span style="color:#a626a4">import</span> <span style="color:#50a14f">'node_modules/bootstrap/scss/bootstrap'</span>;
@<span style="color:#a626a4">import</span> <span style="color:#50a14f">'node_modules/bootstrap-vue/src/index.scss'</span>;</span>
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<span style="color:#383a42"><span style="color:#a0a1a7"><em>// app.js</em></span>
<span style="color:#a626a4">import</span> <span style="color:#50a14f">'custom.scss'</span></span>

在包含Bootstrap SCSS（）之前，请确保@import或定义自定义变量值，并在此之后包括BootstrapVue SCSS（）以确保正确设置变量。bootstrap.scssbootstrap-vue.scss

确保将所有SCSS @import放入单个SCSS文件中，然后将该单个文件导入到项目中。默认情况下，将单个SCSS文件导入项目不会在文件之间共享变量值和函数。

注意：需要webpack配置才能加载CSS / SCSS文件（官方指南）。

有关主题Bootstrap的信息，请查看主题参考部分。

别名Vue导入

BootstrapVue和PortalVue需要访问全局Vue引用（via import Vue from 'vue'）。

如果您使用的是特定版本的Vue（即仅运行时与编译器+运行时），则需要'vue'在bundler配置中设置别名，以确保您的项目BootstrapVue和PortalVue都使用相同的构建版本Vue。如果您看到错误，例如"

示例：webpack.config.js中的Vue别名

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<span style="color:#383a42"><span style="color:#c18401">module</span>.exports = {
  <span style="color:#a0a1a7"><em>// ...</em></span>
  resolve: {
    <span style="color:#986801">alias</span>: {
      <span style="color:#a0a1a7"><em>// If using the runtime only build</em></span>
      vue$: <span style="color:#50a14f">'vue/dist/vue.runtime.esm.js'</span> <span style="color:#a0a1a7"><em>// 'vue/dist/vue.runtime.common.js' for webpack 1</em></span>
      <span style="color:#a0a1a7"><em>// Or if using full build of Vue (runtime + compiler)</em></span>
      <span style="color:#a0a1a7"><em>// vue$: 'vue/dist/vue.esm.js'      // 'vue/dist/vue.common.js' for webpack 1</em></span>
    }
  }
}</span>

注意：如果您的项目有多个的WebPack配置文件（即webpack.config.js， webpack.renderer.config.js，webpack.vendor.config.js，webpack.server.config.js， webpack.client.config.js，等），您将需要设置相应的别名在所有的人。

有关 为webpack， rollup.js，Parcel等设置别名的完整详细信息，请参阅Vue.js指南。

Nuxt.js模块

2.8.1建议使用Nuxt.js版本（或更高版本）。

安装依赖项：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<span style="color:#383a42"><span style="color:#a0a1a7"><em># With npm</em></span>
npm i bootstrap-vue

<span style="color:#a0a1a7"><em># With yarn</em></span>
yarn add bootstrap-vue</span>

添加bootstrap-vue/nuxt到nuxt.config.js的模块部分。

这将包括boostrap.css与bootstrap-vue.css默认预编译CSS。

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<span style="color:#383a42"><span style="color:#c18401">module</span>.exports = {
  <span style="color:#986801">modules</span>: [<span style="color:#50a14f">'bootstrap-vue/nuxt'</span>]
}</span>

如果您使用的是自定义Bootstrap SCSS，则可以通过将以下选项设置为以下来禁用自动包含Bootstrap和BootstrapVue预编译的CSS文件false：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<span style="color:#383a42"><span style="color:#c18401">module</span>.exports = {
  <span style="color:#986801">modules</span>: [<span style="color:#50a14f">'bootstrap-vue/nuxt'</span>],
  <span style="color:#986801">bootstrapVue</span>: {
    <span style="color:#986801">bootstrapCSS</span>: <span style="color:#0184bb">false</span>, <span style="color:#a0a1a7"><em>// Or `css: false`</em></span>
    bootstrapVueCSS: <span style="color:#0184bb">false</span> <span style="color:#a0a1a7"><em>// Or `bvCSS: false`</em></span>
  }
}</span>

BootstrapVue的自定义SCSS依赖于Bootstrap SCSS变量和mixins。您可以在项目的自定义SCSS文件中包含Bootstrap和BootstrapVue SCSS：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<span style="color:#383a42"><span style="color:#a0a1a7"><em>// custom.scss</em></span>

<span style="color:#a0a1a7"><em>// Custom overrides go first</em></span>
<span style="color:#986801">$grid-breakpoints</span>: (
  xs: <span style="color:#986801">0</span>,
  sm: <span style="color:#986801">480px</span>,
  md: <span style="color:#986801">640px</span>,
  lg: <span style="color:#986801">992px</span>,
  xl: <span style="color:#986801">1300px</span>
);

<span style="color:#a0a1a7"><em>// Then include the following</em></span>
@<span style="color:#a626a4">import</span> <span style="color:#50a14f">'bootstrap/scss/bootstrap.scss'</span>;
@<span style="color:#a626a4">import</span> <span style="color:#50a14f">'bootstrap-vue/src/index.scss'</span>;

<span style="color:#a0a1a7"><em>// And define any of your custom overrides or additional CSS/SCSS here,</em></span>
<span style="color:#a0a1a7"><em>// or via an @import</em></span></span>

在您的应用程序主入口点包括单个自定义SCSS文件（使用时sass-loader）：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<span style="color:#383a42"><span style="color:#a0a1a7"><em>// app.js</em></span>
<span style="color:#a626a4">import</span> <span style="color:#50a14f">'custom.scss'</span></span>

transformAssetUrls与Nuxt.js

v2.0.0-rc.22中的新功能BootstrapVue Nuxt插件模块将自动为您添加BootstrapVue特定的transformAssetUrls 图像src道具配置。

用Nuxt.js摇晃的树

在2.0.0-rc.20增强

如果您希望减少生产包大小，因为您只使用可用的BootstrapVue插件的子集，则可以配置BootstrapVue列表componentPlugins或者directivePlugins要在Nuxt.js项目中全局安装。

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<span style="color:#383a42"><span style="color:#c18401">module</span>.exports = {
  <span style="color:#986801">modules</span>: [<span style="color:#50a14f">'bootstrap-vue/nuxt'</span>],
  <span style="color:#986801">bootstrapVue</span>: {
    <span style="color:#986801">componentPlugins</span>: [
      <span style="color:#50a14f">'LayoutPlugin'</span>,
      <span style="color:#50a14f">'FormPlugin'</span>,
      <span style="color:#50a14f">'FormCheckboxPlugin'</span>,
      <span style="color:#50a14f">'FormInputPlugin'</span>,
      <span style="color:#50a14f">'FormRadioPlugin'</span>,
      <span style="color:#50a14f">'ToastPlugin'</span>,
      <span style="color:#50a14f">'ModalPlugin'</span>
    ],
    <span style="color:#986801">directivePlugins</span>: [<span style="color:#50a14f">'VBPopoverPlugin'</span>, <span style="color:#50a14f">'VBTooltipPlugin'</span>, <span style="color:#50a14f">'VBScrollspyPlugin'</span>]
  }
}</span>

新的2.0.0-rc.20有用于提供两个额外的辅助插件bvModal和bvToast注射（如果你不使用 ModalPlugin或ToastPlugin插件），在可用componentPlugins的选项：

  • BVModalPlugin– 提供$bvModal用于生成 消息框的注入。
  • BVToastPlugin– 提供注射$bvToast以生成 按需吐司。

2.0.0-rc.20中的新增功能您还可以选择导入单个组件和/或指令，方法是配置BootstrapVue列表components或者 directives要在Nuxt.js项目中进行全局安装。

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<span style="color:#383a42"><span style="color:#c18401">module</span>.exports = {
  <span style="color:#986801">modules</span>: [<span style="color:#50a14f">'bootstrap-vue/nuxt'</span>],
  <span style="color:#986801">bootstrapVue</span>: {
    <span style="color:#986801">components</span>: [<span style="color:#50a14f">'BContainer'</span>, <span style="color:#50a14f">'BRow'</span>, <span style="color:#50a14f">'BCol'</span>, <span style="color:#50a14f">'BFormInput'</span>, <span style="color:#50a14f">'BButton'</span>, <span style="color:#50a14f">'BTable'</span>, <span style="color:#50a14f">'BModal'</span>],
    <span style="color:#986801">directives</span>: [<span style="color:#50a14f">'VBModal'</span>, <span style="color:#50a14f">'VBPopover'</span>, <span style="color:#50a14f">'VBTooltip'</span>, <span style="color:#50a14f">'VBScrollspy'</span>]
  }
}</span>

随意将插件导入与单个组件和指令导入混合搭配。

有关可用插件名称（以及每个插件中包含的组件和指令）以及组件和/或指令导入名称的详细信息，请参阅每个组件和 指令文档底部的参考部分。

请注意，导入单个组件时，任何组件别名都将不可用。

注意：最佳树抖动仅在Nuxt.js应用程序处于production 模式时有效。不处于production模式（即 dev模式）时，您可能会注意到较大的束大小。

不要使用Nuxt模块如果要将单个BootstrapVue组件导入到 Nuxt应用程序的特定页面和/或组件中。请按照上面的 模块捆绑器部分以及下面的 选择性导入部分进行操作。

使用Nuxt.js传递自定义BootstrapVue配置

如果需要传递自定义 BootstrapVue配置，可以通过在以下位置设置config属性来实现nuxt.config.js：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<span style="color:#383a42"><span style="color:#c18401">module</span>.exports = {
  <span style="color:#986801">modules</span>: [<span style="color:#50a14f">'bootstrap-vue/nuxt'</span>],
  <span style="color:#986801">bootstrapVue</span>: {
    <span style="color:#986801">config</span>: {
      <span style="color:#a0a1a7"><em>// Custom config options here</em></span>
    }
  }
}</span>

使用pretranspiled版本的BootstrapVue for Nuxt.js

Nuxt.js模块使用BootstrapVue的预编译版本来实现更快的开发构建，使用BootstrapVue的source（src/）来实现更高质量的生产构建。

您可以使用usePretranspiled选项覆盖此选项。设置为true始终使用预先转换的版本，而将其设置为false始终使用src/。默认情况usePretranspiled下，仅在开发模式下 启用。您不应该使用此选项，因为默认值对于性能而言是最佳选择。

Vue CLI 2

DEPRECATED使用Vue CLI 3。

BootstrapVue有两个可用的Vue CLI模板：

  • webpack-simple：用于概念验证或小应用程序的快速脚手架
  • webpack：更大，生产就绪的模板，有更多选项
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<span style="color:#383a42"><span style="color:#a0a1a7"><em># Ensure Vue CLI is installed and up to date</em></span>
npm i -g vue-cli

<span style="color:#a0a1a7"><em># Initialize a BootstrapVue project in the directory 'my-project'</em></span>
vue init bootstrap-vue/webpack-simple my-project

<span style="color:#a0a1a7"><em># Change into the directory</em></span>
<span style="color:#c18401">cd</span> my-project

<span style="color:#a0a1a7"><em># Install dependencies</em></span>
npm i

<span style="color:#a0a1a7"><em># Fire up the dev server with HMR</em></span>
npm run dev</span>

您可以重复上述替换命令bootstrap-vue/webpack-simple与 bootstrap-vue/webpack该模板的WebPack。

Vue CLI 3

与V2不同，Vue CLI 3不使用模板。

在目录中创建一个新项目my-project：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<span style="color:#383a42">npx @vue/cli create my-project</span>

输入my-project目录并安装bootstrap-vue：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<span style="color:#383a42">npm i bootstrap-vue</span>

在引擎盖下，Vue CLI使用webpack，因此我们可以像webpack说明一样注册BootstrapVue插件。

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<span style="color:#383a42"><span style="color:#a626a4">import</span> Vue <span style="color:#a626a4">from</span> <span style="color:#50a14f">'vue'</span>
<span style="color:#a626a4">import</span> BootstrapVue <span style="color:#a626a4">from</span> <span style="color:#50a14f">'bootstrap-vue'</span>

<span style="color:#a626a4">import</span> <span style="color:#50a14f">'bootstrap/dist/css/bootstrap.css'</span>
<span style="color:#a626a4">import</span> <span style="color:#50a14f">'bootstrap-vue/dist/bootstrap-vue.css'</span>

Vue.use(BootstrapVue)</span>

有关Vue CLI 3的其他配置，以便在各种BootstrapVue组件上使用image src props的项目相对路径，请参阅Image Src Resolving参考页面的Vue CLI 3部分 。

Vue CLI 3插件

作为替代方案，您可以使用 Bootstrap-Vue Vue CLI 3插件来帮助您配置应用程序。

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<span style="color:#383a42">vue create my-app
<span style="color:#c18401">cd</span> my-app
vue add bootstrap-vue</span>

这将创建一个具有基本BootstrapVue设置的新应用程序，以启动项目。

将来，此插件将提供更高级配置和模板的选项。

选择性组件和指令包含在模块捆绑器中

在2.0.0-rc.20中简化

使用模块捆绑器时，您可以选择仅导入特定组件组（插件），组件和/或指令。

注意：最佳树抖动仅在webpack 4处于production模式且启用了javascript缩小时才有效 。

组件组和指令作为Vue插件

在2.0.0-rc.22中变化

您可以通过从componentsor directives目录导入来将组件组和指令导入为Vue插件：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<span style="color:#383a42"><span style="color:#a0a1a7"><em>// This imports all the layout components such as <b-container>, <b-row>, <b-col>:</em></span>
<span style="color:#a626a4">import</span> { LayoutPlugin } <span style="color:#a626a4">from</span> <span style="color:#50a14f">'bootstrap-vue'</span>
Vue.use(LayoutPlugin)

<span style="color:#a0a1a7"><em>// This imports <b-modal> as well as the v-b-modal directive as a plugin:</em></span>
<span style="color:#a626a4">import</span> { ModalPlugin } <span style="color:#a626a4">from</span> <span style="color:#50a14f">'bootstrap-vue'</span>
Vue.use(ModalPlugin)

<span style="color:#a0a1a7"><em>// This imports <b-card> along with all the <b-card-*> sub-components as a plugin:</em></span>
<span style="color:#a626a4">import</span> { CardPlugin } <span style="color:#a626a4">from</span> <span style="color:#50a14f">'bootstrap-vue'</span>
Vue.use(CardPlugin)

<span style="color:#a0a1a7"><em>// This imports directive v-b-scrollspy as a plugin:</em></span>
<span style="color:#a626a4">import</span> { VBScrollspyPlugin } <span style="color:#a626a4">from</span> <span style="color:#50a14f">'bootstrap-vue'</span>
Vue.use(VBScrollspyPlugin)</span>

作为插件导入时，大多数情况下都会导入所有子组件和相关指令。即导入时<b-nav>，<nav-*>还包括所有子组件，以及所有下拉子组件。组件速记别名（如果有）也包含在插件中。有关详细信息，请参阅组件和指令文档。

有两个额外的辅助插件可用于提供bvModal和bvToast注入（如果您不使用ModalPlugin或ToastPlugin插件）可从以下位置导入'bootstrap-vue'：

  • BVModalPlugin– 提供$bvModal用于生成 消息框的注入。
  • BVToastPlugin– 提供注射$bvToast以生成 按需吐司。

个别组件和指令

在2.0.0-rc.22中变化

如果您只想引入特定组件或组件集，可以通过直接导入这些组件来完成此操作。

要挑选组件/指令，首先将其导入到正在使用它的文件中：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<span style="color:#383a42"><span style="color:#a0a1a7"><em>// Place all imports from 'bootstrap-vue' in a single import</em></span>
<span style="color:#a0a1a7"><em>// statement for optimal bundle sizes</em></span>
<span style="color:#a626a4">import</span> { BModal, VBModal } <span style="color:#a626a4">from</span> <span style="color:#50a14f">'bootstrap-vue'</span></span>

然后将其添加到组件定义中：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<span style="color:#383a42">Vue.component(<span style="color:#50a14f">'my-component'</span>, {
  <span style="color:#986801">components</span>: {
    <span style="color:#50a14f">'b-modal'</span>: BModal
  },
  <span style="color:#986801">directives</span>: {
    <span style="color:#a0a1a7"><em>// Note that Vue automatically prefixes directive names with `v-`</em></span>
    <span style="color:#50a14f">'b-modal'</span>: VBModal
  }
  <span style="color:#a0a1a7"><em>// ...</em></span>
})</span>

或者在全球注册：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<span style="color:#383a42">Vue.component(<span style="color:#50a14f">'b-modal'</span>, BModal)
<span style="color:#a0a1a7"><em>// Note that Vue automatically prefixes directive names with `v-`</em></span>
Vue.directive(<span style="color:#50a14f">'b-modal'</span>, VBModal)</span>

Vue允许使用各种组件和指令名称语法，因此可以随意使用 kebab-casing （示出）， camelCasing， PascalCasing和/或对象属性简写（仅限组件）。

浏览器

在HTML <head>部分中添加Boostrap和BootstrapVue CSS URL ，然后添加所需的JavaScript文件。

在支持旧浏览器时（请参阅下面的浏览器支持），您需要在加载Vue和BoostrapVue JavaScript文件之前包含一个用于处理现代JavaScript功能的polyfill。

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<span style="color:#383a42"><span style="color:#a0a1a7"><em><!-- Add this to <head> --></em></span>

<span style="color:#a0a1a7"><em><!-- Load required Bootstrap and BootstrapVue CSS --></em></span>
<<span style="color:#e45649">link</span> <span style="color:#986801">type</span>=<span style="color:#50a14f">"text/css"</span> <span style="color:#986801">rel</span>=<span style="color:#50a14f">"stylesheet"</span> <span style="color:#986801">href</span>=<span style="color:#50a14f">"//unpkg.com/bootstrap/dist/css/bootstrap.min.css"</span> />
<<span style="color:#e45649">link</span> <span style="color:#986801">type</span>=<span style="color:#50a14f">"text/css"</span> <span style="color:#986801">rel</span>=<span style="color:#50a14f">"stylesheet"</span> <span style="color:#986801">href</span>=<span style="color:#50a14f">"//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css"</span> />

<span style="color:#a0a1a7"><em><!-- Load polyfills to support older browsers --></em></span>
<<span style="color:#e45649">script</span> <span style="color:#986801">src</span>=<span style="color:#50a14f">"//polyfill.io/v3/polyfill.min.js?features=es2015%2CMutationObserver"</span> <span style="color:#986801">crossorigin</span>=<span style="color:#50a14f">"anonymous"</span>></<span style="color:#e45649">script</span>>

<span style="color:#a0a1a7"><em><!-- Load Vue followed by BootstrapVue --></em></span>
<<span style="color:#e45649">script</span> <span style="color:#986801">src</span>=<span style="color:#50a14f">"//unpkg.com/vue@latest/dist/vue.min.js"</span>></<span style="color:#e45649">script</span>>
<<span style="color:#e45649">script</span> <span style="color:#986801">src</span>=<span style="color:#50a14f">"//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"</span>></<span style="color:#e45649">script</span>></span>

构建变体

为构建环境/打包器选择最佳变体有助于减少捆绑包大小。如果您的捆绑器支持es模块，它将自动优先于commonjs。

变种

环境

包路径

ESM模块

webpack 2+ / rollup.js

esm/index.js

ESM捆绑

webpack 2+ / rollup.js

dist/bootstrap-vue.esm.js 要么 dist/bootstrap-vue.esm.min.js

commonjs2

webpack 1 / …

dist/bootstrap-vue.common.js 要么 dist/bootstrap-vue.common.min.js

UMD

浏览器

dist/bootstrap-vue.js 要么 dist/bootstrap-vue.min.js

ES模块

webpack 2+ / rollup.js

es/index.js 在2.0.0-rc.22中弃用

上面列出的所有构建变体都已针对BootstrapVue支持的浏览器进行了预转换。但是，如果你的目标只是现代的浏览器，你可能要导入BootstrapVue的src/index.js，和白名单bootstrap-vue/src通过自己的项目transpilation。这可能会减少束大小。

BootstrapVue依赖于Popper.js（对于Tooltip，Popover和Dropdown定位），PortalVue （对于toast）和vue-functional-data-merge（对于功能组件）和部分core-js。这四个依赖项包含在UMD捆绑包中。

迁移已使用Bootstrap的项目

如果您已经使用过Bootstrap v4，则可能需要对项目进行一些调整：

  • bootstrap.js从页面脚本或构建管道中删除该文件
  • 如果Bootstrap是唯一依赖的东西jQuery，你可以安全地删除它 – BootstrapVue 不依赖于它jQuery
  • 将您的本机Bootstrap HTML标记转换为简化的BootstrapVue自定义组件标记

浏览器支持

CSS

BootstrapVue将与Bootstrap v4.3 CSS / SCSS一起使用。有关Bootstrap v4当前支持的浏览器的更多信息，请参阅 浏览器和设备。

JS

BootstrapVue是用Vue.js编写的！因此，您的项目和捆绑包取决于支持哪些浏览器。

BootstrapVue使用以下功能和API：

  • ES6（例如Array.from()，Array.isArray()，Object.assign()，Object.is()，等等）
  • Promise
  • MutationObserver

如果你想支持旧的IE，Android和iOS设备，你可能想要使用 core-js和 mutationobserver-shim：

  • npm install core-js regenerator-runtime mutationobserver-shim
  • 在应用主入口点导入polyfill：
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<span style="color:#383a42"><span style="color:#a626a4">import</span> <span style="color:#50a14f">'core-js/stable"'</span>
<span style="color:#a626a4">import</span> <span style="color:#50a14f">'regenerator-runtime/runtime'</span>
<span style="color:#a626a4">import</span> <span style="color:#50a14f">'mutationobserver-shim'</span>
<span style="color:#a626a4">import</span> Vue <span style="color:#a626a4">from</span> <span style="color:#50a14f">'vue'</span>
<span style="color:#a626a4">import</span> BootstrapVue <span style="color:#a626a4">from</span> <span style="color:#50a14f">'bootstrap-vue'</span></span>

如果使用已弃用的@ babel / polyfill：

  • npm install @babel/polyfill mutationobserver-shim
  • 在应用主入口点导入polyfill：
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<span style="color:#383a42"><span style="color:#a626a4">import</span> <span style="color:#50a14f">'@babel/polyfill'</span>
<span style="color:#a626a4">import</span> <span style="color:#50a14f">'mutationobserver-shim'</span>
<span style="color:#a626a4">import</span> Vue <span style="color:#a626a4">from</span> <span style="color:#50a14f">'vue'</span>
<span style="color:#a626a4">import</span> BootstrapVue <span style="color:#a626a4">from</span> <span style="color:#50a14f">'bootstrap-vue'</span></span>

或者，使用Polyfill.io通过<script>HTML <head>部分中的标签动态提供特定于浏览器的polyfill 。有关示例，请参阅上面的浏览器部分。

工具支持

VS Code + Vetur

如果您使用VS Code作为文本编辑器，则BootstrapVue在使用Vetur扩展时具有可用的组件属性的智能感知自动完成 功能。

Twitter：Vetur + BootstrapVue

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/141776.html原文链接：https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022年5月2，如有侵权请联系 cloudcommunity@tencent.com 删除
rollup.js
bootstrap
webpack
打包
javascript

本文分享自 作者个人站点/博客 前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ，欢迎热爱写作的你一起参与！

rollup.js
bootstrap
webpack
打包
javascript
评论
登录后参与评论
暂无评论
登录 后参与评论
推荐阅读
windows 开机自动登录并锁定「建议收藏」
javahttps网络安全
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/162755.html原文链接：https://javaforall.cn
全栈程序员站长
2022/09/13
1.9K0
Windows 2016 服务器安全配置和加固「建议收藏」
windows网络安全云服务器访问管理tcp/ip
更换Windows更新服务器 如果你觉得默认的Windows更新服务器比较慢，或者如果选择了阿里云或腾讯云服务器的话，可以更换Windows服务器。
全栈程序员站长
2022/06/27
4.9K0
Windows 2016 服务器安全配置和加固「建议收藏」
WOL（Wake On LAN – 局域网唤醒）外网唤醒 配置教程 远程开机「建议收藏」
tcp/iphttpsdns网络安全udp
前言（废话）：虽然这个功能叫局域网唤醒，但与路由器的端口映射功能配合，广域网唤醒也是很容易的。只要有一台能上网的电脑或手机，就能把家中电脑打开，需要用家里电脑又不在家的时候很方便。 注意事项： 此教程是为了实现外网唤醒内网主机，所以开始之前请确保您的宽带运营商分配给你的IP是公网IP！！！如果您的路由器获取的IP是内网IP（下面有IP段），就不能在外网唤醒了。不过！！如果您用的是光猫路由一体机，下面的路由器获取的也是内网IP，这时就需要登录光猫，将连接方式改为桥接，然后通过路由器拨号上网，这样路由器获取的才能是公网IP，路由器的DDNS功能才能将域名解析到你的公网IP上。 内网IP段：192.168.0.0-192.168.255.255、172.16.0.0-172.31.255.255、10.0.0.0-10.255.255.255 请确保您的路由器有DDNS功能（现在应该是都有的） 一、开启WOL功能 开机狂按 进BIOS设置
全栈程序员站长
2022/08/22
20.2K1
WOL（Wake On LAN – 局域网唤醒）外网唤醒 配置教程 远程开机「建议收藏」
卡盟网站程序源码，支持无限分站，货源共享「建议收藏」
https网络安全数据库sqljava
宝塔安装命令：bt.cn（自行获取） (baota我已经安装好了，接下来给大家演示如何操作搭建卡信乐)
全栈程序员站长
2022/09/21
5.9K1
卡盟网站程序源码，支持无限分站，货源共享「建议收藏」
Mac使用秘钥登录Linux服务器「建议收藏」
sshtcp/iplinuxhttpsjava
scp -P <端口号> ~/.ssh/id_rsa.pub <用户名>@<ip地址>:/home/id_rsa.pub
全栈程序员站长
2022/07/11
2.2K0
Mac使用秘钥登录Linux服务器「建议收藏」
在pycharm中使用github「建议收藏」
gitgithub开源javahttps
一、首先你得有个github账号 （温馨提示，记不住密码的同学可以拿个小本本记一下密码嗷。）
全栈程序员站长
2022/09/27
2.6K0
在pycharm中使用github「建议收藏」
Pycharm连接并调用服务器「建议收藏」
idesshjavahttps
Pycharm可以与服务器建立连接，把相应的项目同步到服务器上，并且可以通过Pycharm直接使用服务器的解释器运行相应程序，实现Pycharm编程，服务器运行的效果。 具体步骤如下： 1.建立一个服务器连接 Pycharm的“Tools”-》“Deployment”-》“Configuration”。
全栈程序员站长
2022/09/27
1.4K0
Pycharm连接并调用服务器「建议收藏」
教你如何免费使用云服务器「建议收藏」
云服务器https网络安全
因为电脑只有CPU，算力不够，以及很多深度学习教程以及模型都是在GPU环境下进行，所以一直想着怎么样才能白嫖到服务器，毕竟云服务器不便宜，要是经常用的话，对学生党来说是一笔不小的支出。有一天经过群友推荐终于找到了一个可以免费试用200元的云服务器。二话不说，先试试看再说。 添加了 北京超级云计算中心 工作人员。他给我申请了账号，然后根据账号在AI 智算云: https://ai.blsc.cn登录，根据网址的操作文档，以及同一对一的解疑群，便可实现创建对应算力服务器以及远程传输、桌面控制等功能。效果如下图：
全栈程序员站长
2022/11/10
17.3K0
教你如何免费使用云服务器「建议收藏」
pycharm专业版 没有试用30天按钮,需要登录的解决方案「建议收藏」
https网络安全
pychram在2021年9月30日之后的版本, 需要用户登录后才能开启试用; 以此来抵制盗版(虽然没有什么用…)
全栈程序员站长
2022/11/17
4K0
pycharm专业版 没有试用30天按钮,需要登录的解决方案「建议收藏」
台式计算机网线,台式电脑如何连接宽带_台式电脑如何连接网线
lan路由器
电脑直接拨号上网(有宽带账号和密码)或者自动获取IP(有帐号没密码)上方式设置见图
全栈程序员站长
2022/09/13
3.9K0
无键盘屏幕配置树莓派连接WiFi
https网络安全ubuntujava
Ubuntu 20.04 LTS都发布好一段时间了,官方支持RaspberryPi,手痒痒了想试试,结果发现没带mini HDMI的转接线,看了下Ubuntu官方的树莓派安装文档: https://ubuntu.com/tutorials/how-to-install-ubuntu-on-your-raspberry-pi#1-overview 可以直接在TF卡根目录下面创建配置文件来实现WiFi连接的.
全栈程序员站长
2022/07/01
1.1K0
无键盘屏幕配置树莓派连接WiFi
ftp工具哪个好用_iis搭建ftp服务器
ftphttps网络安全网站
相信很多网友都听说过ftp扫描工具，但是却对其不是很了解，ftp扫描工具是一种ftp账号软件，用户可在ftp扫描工具的帮助下轻松对网站地址进行扫描，从而采集到账号密码、网站收录等多种信息。在对ftp扫描工具做了大概了解之后，小编带大家解读ftp扫描工具如何使用？
全栈程序员站长
2022/11/10
12.1K0
ftp工具哪个好用_iis搭建ftp服务器
PLSQL developer使用技巧「建议收藏」
sqljavahttps网络安全
PLSQL Developer的默认字体是大小是小五，看起来比较小。 我们可以通过以下方式将字体改编为五号字体。
全栈程序员站长
2022/06/26
1.5K0
PLSQL developer使用技巧「建议收藏」
黑客养成手册「建议收藏」
javahttps网络安全安全
其实这些方法很简单！现在就有个机会来了！我为大家讲解！ 首先申明这类技术可不要乱对别人使用啊！出事本人概不负责!
全栈程序员站长
2022/09/30
3890
WebForms UnobtrusiveValidationMode 需要“jquery”ScriptResourceMapping。「建议收藏」
javajavascripthttps网络安全jquery
在我们平时登录微博或是淘宝时，除了输入账号密码，经常还要输入验证码，不管是哪一项我们输错了，都会弹出相应的提示框，我们在cs中，用msgbox就可以弹出提示框，那么在网页上，如何弹出提示框呢？以登录时用户名或验证码提示为例：
全栈程序员站长
2022/08/09
1.1K0
WebForms UnobtrusiveValidationMode 需要“jquery”ScriptResourceMapping。「建议收藏」
windows server2008 R2搭建ftp服务器「建议收藏」
ftpiis访问管理其他https
我们在工作中经常使用到ftp服务器。包括我们的server-u服务器，但是我们的server-u是收费软件，如果公司对软件版权问题比较注重的话，不建议使用server-u，特别是如果公司有安装了server2008的话，我们就可以使用server2008子代的IIS工具来搭建我们的ftp服务器。今天我们就来一步一步搭建我们的ftp服务器。
全栈程序员站长
2022/09/14
5.3K0
xshell连接虚拟机使用的是什么连接模式_虚拟机安装ssh服务
javahadoophttps网络安全bash
3.虚拟机网络连通（具体可看(5条消息) Hadoop（1）——Hadoop集群构建（4）——Linux系统网络配置_连胜是我偶像的博客-CSDN博客
全栈程序员站长
2022/09/28
5900
xshell连接虚拟机使用的是什么连接模式_虚拟机安装ssh服务
在pycharm里面对文件夹或者文件进行重命名的一种方法「建议收藏」
javahttps网络安全
因为你要进行重命名的文件有可能当前被引用着，你修改之后，原本可以跑通的程序有可能跑不通了。
全栈程序员站长
2022/09/26
1.3K0
在pycharm里面对文件夹或者文件进行重命名的一种方法「建议收藏」
[Pycharm] 远程连接服务器
httpspython网络安全linux
File->Settings->Project->Python Interpreter
全栈程序员站长
2022/09/27
10.5K0
[Pycharm] 远程连接服务器
ubuntu16.04下安装QQ教程「建议收藏」
https网络安全ubuntulinuxjava
最近换工作，公司完全用的是Linux系统，目前不习惯，感觉别扭；后面熟悉就好了，由于工作需要，要安装QQ；有两个办法：1.在ubuntu下安装virtual box虚拟机，然后再用win系统，再安装QQ；2.在ubuntu下安装winQQ；由于我安装virtual box虚拟机，出现虚拟机打不开的情况，能力问题，暂还未解决，就用了第二种方法；在网上找到安装教程如下：
全栈程序员站长
2022/07/27
7290
ubuntu16.04下安装QQ教程「建议收藏」
推荐阅读
编辑精选文章
万字详解高可用架构设计Go 开发者必备：Protocol Buffers 入门指南10分钟带你彻底搞懂分布式链路跟踪多租户的 4 种常用方案亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？60页PPT全解：DeepSeek系列论文技术要点整理
相关讨论
服务器为什么会自动断开连接？如何收藏文章？远程连接服务器时不时就断开连接为啥啊？
相关课程
轻量应用构建训练营ES Serverless一站式日志分析入门到精通微信小程序应用实践_《锋运票务系统》
windows 开机自动登录并锁定「建议收藏」
1.9K0
Windows 2016 服务器安全配置和加固「建议收藏」
4.9K0
WOL（Wake On LAN – 局域网唤醒）外网唤醒 配置教程 远程开机「建议收藏」
20.2K1
卡盟网站程序源码，支持无限分站，货源共享「建议收藏」
5.9K1
Mac使用秘钥登录Linux服务器「建议收藏」
2.2K0
在pycharm中使用github「建议收藏」
2.6K0
Pycharm连接并调用服务器「建议收藏」
1.4K0
教你如何免费使用云服务器「建议收藏」
17.3K0
pycharm专业版 没有试用30天按钮,需要登录的解决方案「建议收藏」
4K0
台式计算机网线,台式电脑如何连接宽带_台式电脑如何连接网线
3.9K0
无键盘屏幕配置树莓派连接WiFi
1.1K0
ftp工具哪个好用_iis搭建ftp服务器
12.1K0
PLSQL developer使用技巧「建议收藏」
1.5K0
黑客养成手册「建议收藏」
3890
WebForms UnobtrusiveValidationMode 需要“jquery”ScriptResourceMapping。「建议收藏」
1.1K0
windows server2008 R2搭建ftp服务器「建议收藏」
5.3K0
xshell连接虚拟机使用的是什么连接模式_虚拟机安装ssh服务
5900
在pycharm里面对文件夹或者文件进行重命名的一种方法「建议收藏」
1.3K0
[Pycharm] 远程连接服务器
10.5K0
ubuntu16.04下安装QQ教程「建议收藏」
7290
相关推荐
windows 开机自动登录并锁定「建议收藏」
更多 >
全栈程序员站长0
LV.1
CTO
文章
55K
获赞
121.6K
专栏
2
目录
  • 入门
    • 先决条件
    • 使用模块捆绑包
      • 别名Vue导入
    • Nuxt.js模块
      • transformAssetUrls与Nuxt.js
      • 用Nuxt.js摇晃的树
      • 使用Nuxt.js传递自定义BootstrapVue配置
      • 使用pretranspiled版本的BootstrapVue for Nuxt.js
    • Vue CLI 2
    • Vue CLI 3
      • Vue CLI 3插件
    • 选择性组件和指令包含在模块捆绑器中
      • 组件组和指令作为Vue插件
      • 个别组件和指令
    • 浏览器
    • 构建变体
    • 迁移已使用Bootstrap的项目
    • 浏览器支持
      • CSS
      • JS
    • 工具支持
      • VS Code + Vetur
加入讨论
的问答专区 >
无名之辈Young
1先锋会员擅长3个领域
相关课程
一站式学习中心 >
轻量应用构建训练营
2948人在学
云服务器
轻量应用服务器
云计算
ES Serverless一站式日志分析入门到精通
1166人在学
Elasticsearch Service
微信小程序应用实践_《锋运票务系统》
320人在学
云托管 CloudBase Run
Serverless 容器服务
对象存储
云数据库 MySQL
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2025 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论
1