入門範本

建立 app 有許多方法，從基本的客戶端 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://bootstrap-vue.dev.org.tw/">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 app 的最新方法。

可以使用 Vue CLI 3 BootStrapVue 外掛程式設定基本 app。請參閱入門文件頁面瞭解更多詳細資訊。

使用自訂 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-* 子元件和下拉式子元件）。請參閱每個文件頁面底部的元件參考或指令參考以瞭解詳細資訊。