BootstrapVue使用入门

BootstrapVue使用入门网站:https://www.npmjs.com/package/bootstrap-vuehttps://bootstrap-vue.js.org/docs入门开始使用BootstrapVue,它基于世界上最流行的框架-Bootstrapv4,用于使用Vue.js构建响应迅速,移动优先的站点。Vue.jsv2.6是必需的,v2.6.10建议 引导v4.3是必需的,…

BootstrapVue使用入门

网站:

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.jsBootstrapVue使用入门https://bootstrap-vue.org/docs

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

bootstrap-vue-admin: bootstrap-vue-admin : admin management system template based on vue + bootstrap-vue + vue-routerBootstrapVue使用入门https://gitee.com/ikaiguang/bootstrap-vue-admin

入门

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

先决条件

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

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

使用模块捆绑包

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

<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插件:

<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文件:

<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 文件:

<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>
<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。如果您看到错误,例如"$attr and $listeners is readonly",或 "Multiple instances of Vue detected",则需要设置别名。

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

<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.jswebpack.vendor.config.jswebpack.server.config.js, webpack.client.config.js,等),您将需要设置相应的别名在所有的人。

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

Nuxt.js模块

2.8.1建议使用Nuxt.js版本(或更高版本)。

安装依赖项:

<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/nuxtnuxt.config.js的模块部分。

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

<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

<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:

<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):

<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项目中全局安装。

<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注射(如果你不使用 ModalPluginToastPlugin插件),在可用componentPlugins的选项:

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

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

<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

<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:更大,生产就绪的模板,有更多选项
<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

<span style="color:#383a42">npx @vue/cli create my-project</span>

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

<span style="color:#383a42">npm i bootstrap-vue</span>

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

<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插件来帮助您配置应用程序。

<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插件:

<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注入(如果您不使用ModalPluginToastPlugin插件)可从以下位置导入'bootstrap-vue'

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

个别组件和指令

在2.0.0-rc.22中变化

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

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

<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>

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

<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>

或者在全球注册:

<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。

<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支持的浏览器进行了预转换。但是,如果你的目标只是现代的浏览器,你可能要导入BootstrapVuesrc/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:
<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:
<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://bianchenghao.cn/35549.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注