Vue | 使用 npm 引入 Bootstrap 的安裝方式

適用Vue2、Vue3 引入 Bootstrap 的安裝方式，不是BootstrapVue唷，兩個是不一樣的~

安裝 Bootstrap

步驟一

透過npm安裝

npm install bootstrap

透過yarn安裝

yarn add bootstrap

步驟二

需要將bootstrap引入 main.js 供全局做使用
/src/main.js

//vue2
import Vue from "vue";
import App from "./App.vue";
import "bootstrap/dist/css/bootstrap.min.css"
....//其他要引入的套件

new Vue({
  el: "#app",
  router,
  components: { App },
  template: "<App/>",
  store,
});

import "bootstrap/dist/js/bootstrap.js"

//vue3
import { createApp } from "vue";
import App from "./App.vue";
import "bootstrap/dist/css/bootstrap.min.css"
....//其他要引入的套件

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

import "bootstrap/dist/js/bootstrap.js"

然後就能根據 Bootstrap官網的文件做使用啦!
要注意的是，bootstrap引入的css檔是在自訂css檔後面載入唷，所以在自己的css裡撰寫時要記得包個class，才不會被bootstrap的樣式蓋過去喔~~

官網: https://getbootstrap.com/
六角學院翻譯繁體中文文件: https://bootstrap5.hexschool.com/

Yuki Hiew