入门模板

有多种方法可以创建你的应用，从基本的客户端侧 HTML 到使用构建系统和编译器。

在所有情况下，你都应该熟悉使用 Vue。Vue 教程的一个好资源是 Laracasts。

基本示例

通过使用标准 <script> 和 <link> 标签在你的页面中加载所需的 JavaScript 和 CSS，快速开始，无需构建系统。

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <title>My first BootstrapVue app</title>

    <!-- Required Stylesheets -->
    <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.css"
    />

    <!-- Load polyfills to support older browsers -->
    <script src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver"></script>

    <!-- Required scripts -->
    <script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
    <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
  </head>
  <body>
    <!-- Our application root element -->
    <div id="app">
      <b-container>
        <b-jumbotron header="BootstrapVue" lead="Bootstrap v4 Components for Vue.js 2">
          <p>For more information visit our website</p>
          <b-btn variant="primary" href="https://vue.bootstrap.ac.cn/">More Info</b-btn>
        </b-jumbotron>

        <b-form-group
          horizontal
          :label-cols="4"
          description="Let us know your name."
          label="Enter your name"
        >
          <b-form-input v-model.trim="name"></b-form-input>
        </b-form-group>

        <b-alert variant="success" :show="showAlert">Hello {{ name }}</b-alert>
      </b-container>
    </div>

    <!-- Start running your app -->
    <script>
      window.app = new Vue({
        el: '#app',
        data: {
          name: ''
        },
        computed: {
          showAlert() {
            return this.name.length > 4 ? true : false
          }
        }
      })
    </script>
  </body>
</html>

Vue CLI 3

Vue CLI 3 是创建 Vue 应用的最新方式。

可使用 Vue CLI 3 BootStrapVue 插件来设置基本应用。有关更多详细信息，请参阅入门文档页面。

使用自定义 Bootstrap v4 CSS 构建

如果你正在使用构建系统，并且想要自定义 Bootstrap v4 CSS，那么以下参考将成为有用的起点

BootstrapVue 的主题参考部分
官方 Bootstrap 主题 Bootstrap 指南

导入单个组件

有几种方法可用于导入单个组件和指令。

你需要配置 vue-loader 来处理编译任何内部为单个文件 .vue 组件的组件。

BootstrapVue 发行版现在包括所有组件和指令的 ES 模块。使用 NPM 捆绑包时，这些模块位于 bootstrap-vue/es/components/ 和 bootstrap-vue/es/directives/ 目录中。从 BootstrapVue 仓库源构建时，当你运行 yarn build 时，将创建这些目录。

导入单个组件和指令

例如，你可以导入 <b-card>（以及它的一些子组件）和 <b-table>，如下所示

// Import the individual components
import { BCard, BCardBody, BCardFooter, BCardHeader, BCardImg, BTable } from 'bootstrap-vue'

// Add components globally
Vue.component('BCard', BCard)
Vue.component('BCardBody', BCardBody)
Vue.component('BCardFooter', BCardFooter)
Vue.component('BCardHeader', BCardHeader)
Vue.component('BCardImg', BCardImg)
Vue.component('BTable', BTable)

// Or make available locally to your component or app
export default {
  components: {
    BCard,
    BCardBody,
    BCardFooter,
    BCardHeader,
    BCardImg,
    BTable
  }
  // ...
}

将组件组和指令导入为 Vue 插件

可以通过导入组件组或指令目录将组件组和/或指令导入为 Vue 插件。导入 <b-card>（和相关的子组件）和 <b-table> 可以通过以下方式完成

// Import the components as Vue plugins
import { CardPlugin, TablePlugin } from 'bootstrap-vue'

// Add the plugins to Vue
Vue.use(CardPlugin)
Vue.use(TablePlugin)

现在，你可以在项目模板中使用 <b-card>（包括 <b-card-*> 子组件）和 <b-table> 组件。

请注意，一些组件插件会自动导入其他指令和组件（即 modal 插件还会导入 v-b-modal 指令，而 nav 插件会自动导入所有 nav-* 子组件和下拉子组件）。有关详细信息，请参阅每个文档页面底部的组件参考或指令参考。