# Vite + Vue3 + Bootstrap5(Part1)
###### tags: `Vue3`、`Vite`、`Bootstrap5`
> 最近跟著六腳學院的 Bootstrap5 學習課程
> 基於在 Vue 這框架比較熟悉，這邊做一個引用的筆記
> 還有這篇是首次練習用 MD 檔做筆記，做一個練習的筆記開端

## :memo: 開始吧!
### Step1 利用 Vite 建立一個新的空專案
[Vite](https://vitejs.dev/) 是一個新的打包工具。目的是為了解決 WebPack 一些打包上的缺點而誕生，在使用上也不是 Vue 專屬使用。[@vitejs/create-app](https://github.com/vitejs/vite/tree/main/packages/create-app) 透過這個連結，可以看到其他的樣板。

假定各位已經安裝 nodejs(14:arrow_up:)、vs code

找一個空目錄，並執行以下指令

npm init @vitejs/app my-vue-app -- --template vue

做完後會有以下的畫面，接著我們按照畫面的步驟執行


當執行完至最後一個步驟

npm run dev


我們開啟瀏覽器敲入 [localhost:3000](http://localhost:3000)，看到畫面正常的出現。

就代表我們專案建立成功!


### Step2 新增 Bootstrap5

[Bootstrap5](https://bootstrap5.hexschool.com/docs/5.0/getting-started/download/) 官方有說明幾種使用方法
1. 利用 CDN
2. 利用 npm i bootstrap

這邊會對這兩種方式做一個說明筆記

## CDN
這個方式基本上沒有甚麼太大的問題

在 index.html 內加入 CSS、JS 的引用

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous"/>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>


接著我們在 app.vue 內做一些元件的新增做測試

[NavBar](https://bootstrap5.hexschool.com/docs/5.0/components/navbar/) 這個元件做測試(純粹為了美觀而選擇)

找到這個元件並複製起來

app.vue 內找到以下程式碼並貼上，如下圖


完成後因為畫面會有一點跑版，我們將樣式做一些調整

找到 margin-top:60px 將他註解

接著重新看到畫面，並且可以正常使用。代表我們引用 Bootstrap5 成功


## npm i bootstrap
使用這個方式，我們先將剛剛 index.html CDN 的部份移除

並執行

npm i bootstrap

接著在 main.js 新增 CSS、JS 的引用


一些簡單的引用說明大概是到這裡，謝謝觀看~
下一次在聊聊怎麼用 SCSS 的方式 import 並且遇到了一點小麻煩該怎麼處理