# 環境建置
> 關於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

下載後終端機會出現以下畫面，需要選取使用的框架

選好框架後再選擇javaScript語法

選好後照著提示指令輸入

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

環境建立完成後，輸入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 請忽略他🤣


> 保險起見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);
    
  })()},[])


第三步:import axios資源

---

### 引入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打開