如何使用 vue3 + bootstrap5 建立一個新專案？

bootstrap5雖然不像antd或element那種專門為vue創建的ui框架幫你弄好許多component，但是他也終於可以用npm安裝囉！！（賀）

---

創建vue3專案

先用vue create自己創建一個vue3專案，然後手動選擇要安裝的項目：

$ vue create bstvue

這時候他會問你一些問題：

選擇安裝方式：手動安裝 Manually select features

要安裝哪些套件：（如下圖）反正一定至少要安裝 choose version, css pre-processors

css pre-processors要裝是因為bootstrap5你要自訂主題他們使用的是scss。

版本：vue3

需要用哪種css預處理器：scss

安裝完成後，cd進入你的專案。

$ cd bstvue

 

安裝bootstrap

要記得現在路徑是在專案內喔！

$ yarn add bootstrap
$ yarn add @popperjs/core

 

引入js：

import "bootstrap";

 

引入scss：

創建scss檔案夾，新增一隻檔案main.scss

@import "bootstrap/scss/bootstrap";

然後在main.js引入這隻scss

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

import "bootstrap";  // 引入js
import "@/scss/main.scss";  // 引入scss

createApp(App).use(store).use(router).mount("#app");

這時候我們隨便把bootstrap某個元件貼到頁面中，

<template>
  <div>
    <div class="alert alert-primary" role="alert">
      A simple primary alert—check it out!
    </div>
    <div class="alert alert-secondary" role="alert">
      A simple secondary alert—check it out!
    </div>
    <div class="alert alert-success" role="alert">
      A simple success alert—check it out!
    </div>
    <div class="alert alert-danger" role="alert">
      A simple danger alert—check it out!
    </div>
    <div class="alert alert-warning" role="alert">
      A simple warning alert—check it out!
    </div>
    <div class="alert alert-info" role="alert">
      A simple info alert—check it out!
    </div>
    <div class="alert alert-light" role="alert">
      A simple light alert—check it out!
    </div>
    <div class="alert alert-dark" role="alert">
      A simple dark alert—check it out!
    </div>
  </div>
</template>

啟動專案

$ yarn serve

就可以看到畫面中已經有自動跑上顏色囉！

如果有用到需要類似Popover的組件，他會依賴Popper套件，官網上文件說：「出於效能上的考量，彈出提示框是選擇性加入的，因此您必須自行初始化 。」

好的那我們就來初始化吧！

先把官網的範例Popover碼貼過來，取一個名字：

<button
      ref="PopoverRef"
      type="button"
      class="btn btn-lg btn-danger"
      data-bs-toggle="popover"
      title="Popover title"
      data-bs-content="And here's some amazing content. It's very engaging. Right?"
    >
      Click to toggle popover
</button>

初始化：

import { onMounted, ref } from "vue";
import { Popover } from "bootstrap";

export default {
  setup() {
    const PopoverRef = ref(null);
    onMounted(() => {
      new Popover(PopoverRef.value);
    });
    return { PopoverRef };
  },
};

假設你頁面裡面有用到很多個，你不用每個都去設定ref，官網有告訴你全部一起設定的方法ＸＤ

    <button
      type="button"
      class="btn btn-secondary"
      data-bs-container="body"
      data-bs-toggle="popover"
      data-bs-placement="top"
      data-bs-content="Top popover"
    >
      Popover on top
    </button>
    <button
      type="button"
      class="btn btn-secondary"
      data-bs-container="body"
      data-bs-toggle="popover"
      data-bs-placement="right"
      data-bs-content="Right popover"
    >
      Popover on right
    </button>

import { onMounted } from "vue";
import { Popover } from "bootstrap";

export default {
  setup() {
    onMounted(() => {
      var popoverTriggerList = [].slice.call(
        document.querySelectorAll('[data-bs-toggle="popover"]')
      );
      popoverTriggerList.map(function (popoverTriggerEl) {
        return new Popover(popoverTriggerEl);
      });
    });
    return {};
  },
};

那如果你覺得在頁面中這樣初始化很醜，你也可以整理一支專門初始化所有bootstrap的檔案。

創建一個composables資料夾，新增一支檔案叫做bootstrap.js：

import { onMounted } from "vue";
import { Popover, Tooltip } from "bootstrap";
export const usePopover = () => {
  onMounted(() => {
    const popoverTriggerList = [].slice.call(
      document.querySelectorAll('[data-bs-toggle="popover"]')
    );
    popoverTriggerList.map(function (popoverTriggerEl) {
      return new Popover(popoverTriggerEl);
    });
  });
};
export const useTooltip = () => {
  onMounted(() => {
    var tooltipTriggerList = [].slice.call(
      document.querySelectorAll('[data-bs-toggle="tooltip"]')
    );
    tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new Tooltip(tooltipTriggerEl);
    });
  });
};

在有用到的頁面單獨引入：

import { usePopover, useTooltip } from "@/composables/bootstrap";
export default {
  setup() {
    usePopover();
    useTooltip();
  },
};