{%hackmd BJrTq20hE %}
###### tags: `Vue` `composition API` `Bootstrap5`
# 從composition API 開始VUE的生活- 在vite使用 Bootstrap 5
1.建立好vite之後輸入

npm i bootstrap

npm i sass

npm i @popperjs/core

2.把在node_modules的bootstrap複製一份到src中的assets

3.在assets建立all.scss

@import "./bootstrap/scss/functions";
@import "./bootstrap/scss/bootstrap";

4.在main.js中 import all.scss 與 bootstrap

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

import 'bootstrap'
import './assets/all.css'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')

5.複製Bootstrap的component測試是否成功使用

參考資料
---
- [Vite + Vue3 + Bootstrap5(Part1)](https://hackmd.io/@chinggo/rkyqvjGtd)
- [Vue3 + Vite + Bootstrap5(Part2)](https://hackmd.io/@chinggo/HJ0H8r4s_)
- [How to fix this error : " Module not found :can't resolve popper.js "](https://stackoverflow.com/questions/57459917/how-to-fix-this-error-module-not-found-cant-resolve-popper-js)