---
# System prepended metadata

title: 環境建置
tags: [vs code]

---

# 環境建置
> 關於NPM、node.js、VITE應用的套件管理工具

## NPM&node.js

第一步:透過[node.js官網](https://nodejs.org/en/)下載node.js
(建議下載LTS-long-term support版本)

第二步:使用VS code開啟檔案，於終端機輸入**node -v、npm -v**
查看版本號確認是否安裝成功

第三步:npm初始化-在終端機輸入npm init 或npm init -y(快速建立)

第四步:npm初始化完成後就可以透過npm安裝套件啦~
安裝套件有幾種不同的指令


|    指令     |           功能           |                     備註                     |
|:-----------:|:------------------------:|:--------------------------------------------:|
| npm install |    下載套件到當前檔案    |               可以縮寫為 npm i               |
|     -g      | 安裝到電腦，可以全域使用 | 特定情況下才會使用，還是建議下載到個別專案上 |
| --save-dev  |      (開發)依賴模組      |                save前有兩個-                 |
|   --save    |      (上線)依賴模組      |               為預設值(可省略)               |
| npm update  |       更新套件版本       |                                              |
| npm uninstall|        移除套件  |       |

> 備註:-指令是加在npm install後面
> npm update、uninstall後方加上欲更改的套件名稱

筆記:
1.Mac電腦若權限不足需在前面加上sudo
2.加上套件名稱-下載該套件，
直接輸入install則會下載package.json裡面的套件

## 下載新版本node
先下載 [nvm](https://github.com/coreybutler/nvm-windows/releases) 
> 選最新版本的exe檔進行安裝

在終端機/命令提示字元輸入 
```
nvm install <version> -下載想要的板本
nvm use <version> -轉換版本
```

---

## VITE
> 使用VITE可以提升開發效率

### 透過npm方式下載VITE
```
npm create vite@latest
```
下載後終端機會出現以下畫面，需要選取使用的框架
![vite筆記](https://hackmd.io/_uploads/rkKECErUkl.png)

選好框架後再選擇javaScript語法
![vite筆記2](https://hackmd.io/_uploads/Bk_p0Er8yg.png)

選好後照著提示指令輸入
![vite筆記3](https://hackmd.io/_uploads/S1UHJSrL1e.png)

輸入完之後打開出現的本地伺服器，出現畫面就完成環境建立了

環境建立完成後，輸入npm run dev、npm run build指令，
運行專案並編譯為靜態檔
> 輸入npm run build後會多出一個dist的資料夾
> 編譯後的dist資料夾需要單獨拉到vs code
> 並使用live server才能看到網頁內容


---


### 打包並部屬到gh page
第一步:建立gh repo
```
建立後在終端機輸入
git init 
git add .
git commit -m "自訂名稱"
git branch -M main
git remote add origin repo網址
git push -u origin main
將專案帶入repo並上傳檔案
```
第二步:npm i gh-pages，下載套件快速部屬

第三步:在package.json檔案裡，
**加入"deploy":"gh-pages -d dist"的指令**
> 在這之前一定要記得先跑過**npm run build**(每次修改後要重新佈署都要再下一次指令!!!)

第四步:修改路徑避免部署錯誤

1.進入vite-config 輸入下列程式碼
```
base: process.env.NODE_ENV==='production'? '/**repo名稱**/':'/',
```
> 如果他顯示process is not defined 請忽略他🤣

![螢幕擷取畫面 2025-01-05 164011](https://hackmd.io/_uploads/rki9rTDIyg.png)

> 保險起見deploy前可以再下一次 npm run build

2.下 npm run deploy 指令 重新部署

3.等待部署完成後點進gh pages確認 ，如果出現畫面就代表成功了 



---

### 載入外部套件(axios為例)
第一步:npm下載axios
```
npm i axios
```

第二步:打開App.jsx 在App()中輸入以下程式碼
> 要記得加上await避免出錯
```
useEffect(()=>{(async () => {
    const res = await axios.get('https://randomuser.me/api/');
    console.log(res);
    
  })()},[])
```
![螢幕擷取畫面 2025-01-05 170127](https://hackmd.io/_uploads/HJlCR5aPUJx.png)

第三步:import axios資源
![螢幕擷取畫面 2025-01-05 170152](https://hackmd.io/_uploads/ByDej6P8yg.png)


---

### 引入sass

第一步:npm載入sass預處理器
```
React:npm add -D sass 
vue:npm add -D sass-embedded
```
第二步:在src>assets資料夾下 新增一個all.scss檔

第三步:import進main.jsx檔中
```
import "./assets/all.scss"
```

第四步:在all.scss檔案中輸入程式碼測試是否連結成功
```
範例:
$primary-bg:black;
$text:white;
body{
    background-color: $primary-bg;
};
h1,text{
    color: $text;
};
```
筆記:要記得加上「;」不然程式會出錯

### 引入(客製化)bootstrap

第一步:使用npm載入資源
```
npm i bootstrap
```
第二步:將bootstrap引入至all.scss檔案
> 於all.scss檔案中輸入:
> 終端機可能會出現一些錯誤提示，
> 為官方程式碼問題不影響實際運作可以忽略
```
@import 'bootstrap/scss/bootstrap';
```

第三步:在node_module>bootstrap>scss中找到
**_variables.scss、_variables-dark.scss**兩個檔案複製到**src>assets**當中

第四步:在all.scss中引入
```
@import 'bootstrap/scss/functions';
@import './variables';

```

第五步:自定義變數有兩個方法
方法一:在_variables.scss檔案中找到欲修改的變數
方法二:將欲修改的變數名稱寫在all.scss(或另開檔案)進行修改
**記得引入時要放在variables檔案之前**

#### 如何引入bootstrap互動插件(以modal為例)
方法一(簡單粗暴法):
第一步:於main.jsx引入bootstrap
```
import 'bootstrap'
```
第二步:在App.jsx輸入[modal範例程式](https://bootstrap5.hexschool.com/docs/5.1/components/modal/#live-demo)，並依照React格式進行修改



---

**方法二(我是細節控法):**

第一步:關閉 import 'bootstrap'(如有開啟)

第二步:將Modal範例的data-bs-toggle、data-bs-target、id移除

第二步:在App()中輸入
```
const modalRef = useRef(null)
```

找到modal視窗並綁定modalRef
```
於屬性輸入 ref={modalRef} 
```

第三步(好複雜OAO):
1.建立新的useEffect並確認有綁定成功
```
useEffect(()=>{
    console.log(modalRef.current);
  },[])
```
2.建立元件存放操作的方法
```
const customModal = useRef(null);
```
3.import Modal方法到all.jsx檔案中
```
import { Modal } from 'bootstrap'

```
4.在(1.所建立的)useEffect中輸入以下程式碼
```
customModal.current = new Modal(modalRef.current)
```

5.元件與方法都綁定完成後就可以使用bootstrap提供的方法操作了
```
const openModal = ()=>{customModal.current.show() }

const closeModal = ()=>{
    customModal.current.hide() 
  }
```


| 操作方法     | 程式碼                                 |
| ------------ | -------------------------------------- |
| 點擊按鈕     | onClick={()=>openModal()}|
| 初始化後打開 | 初始化的useEffect最後輸入  openModal() |
|  打開後隔2秒關閉 | setTimeout(()=>{closeModal()},2000)                             |

---

**方法三**

```
//導入modal功能
  const modalRef =useRef(null);

  useEffect(()=>{
    new Modal (modalRef.current);
  },[])

  const handleModalShow = ()=>{
    const modalInstance =Modal.getInstance(modalRef.current);
    modalInstance.show()
  }

  const handleModalHide = ()=>{
    const modalInstance =Modal.getInstance(modalRef.current);
    modalInstance.hide()
  }
  
解析:建立Ref後綁到DOM上，並透過onClick的方法控制開關
```

---
### 設定環境變數

第一步:在專案資料夾根目錄建立.env檔案(vite-project的根目錄)
第二步:設定環境變數`VITE_APP_PATH=https://randomuser.me/api/`

第三步:`console.log(import.meta.env.VITE_APP_PATH)`確認是否綁定成功


---

### 其他備註筆記
重開後要先確認在哪個位置(專案資料夾or vite-project資料夾)
如果在專案資料夾需要切換到vite-project 的資料夾中，不然會找不到指令
```
cd vite-project
```

也可以直接使用電腦的終端機建立環境，最後再輸入`
code .
`
就可以將vs code打開
