# 建立vite + vue + BS5 環境

## 安裝
### vite

[vite官網](https://vitejs.dev/guide/)

1. 執行安裝最新版本vite指令

npm create vite@latest

2. 輸入專案資料夾名稱

3. 框架選vue

4. 選create-vue(客製化安裝)

5. 安裝相關套件

6. 先不安裝TpyeScript

7. JSX不裝(react相關)
Vue Router要裝
Pinia要裝
Unit Testing不裝(相關測試套件)

8. End-to-End(不裝)
ESLint(要裝)
Prettier自動格式化工具(要裝)

9. 安裝相關套件

npm i

### Bootstrap
- [BS官網](https://getbootstrap.com/docs/5.3/getting-started/vite/)

1. 安裝 bs sass

npm i --save bootstrap @popperjs/core
npm i bootstrap-icons
npm i --save-dev sass

2. 引入 bs

import '../style/all.scss' // Import our custom CSS
import * as bootstrap from 'bootstrap' // Import all of Bootstrap's JS
import 'bootstrap-icons/font/bootstrap-icons.css'; // Import Bootstrap's icon

3. 到 node_modules 的 bootstrapt/scss 資料夾拿這幾個檔案出來放到 style/utils & /base 方便後續客製化

4. 到 all.scss 引入下面檔案(註解掉一些用不到的)
- [官網參考](https://getbootstrap.com/docs/5.3/customize/sass/)

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
@import "../utils/variables";
@import "../utils/variables-dark";

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";

// 6. Optionally include any other parts as needed
@import "../utils/utilities";
@import "../base/reboot";
// @import "bootstrap/scss/type";
// @import "bootstrap/scss/images";
// @import "bootstrap/scss/containers";
// @import "bootstrap/scss/grid";
// @import "bootstrap/scss/helpers";

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
// @import "bootstrap/scss/utilities/api";

// 8. Add additional custom code here

@import "bootstrap/scss/bootstrap";
@import "../utils/helpers";

## 設置
為了部屬到 github ，到 vite.config.js 加上

base: '/專案名稱/',


## 部屬到github

npm run build
cd dist
git init
git add -A
git commit -m 'deploy'
git push -f https://github.com/<gitnub ID>/<專案名稱>.git master:gh-pages