diff --git a/進階_NUXT框架/README.md b/進階_NUXT框架/README.md
new file mode 100644
index 0000000..d20fca3
--- /dev/null
+++ b/進階_NUXT框架/README.md
@@ -0,0 +1,128 @@
+# NUXT 
+## 基於VUE 可以更有效率地進行前端，省了很多路由部分，可以直接創建Page即可開始
+先下載Node.js 並安裝
+
+於準備開發的資料夾下方開啟CMD
+
+檢查有無node.js
+```
+npm -v
+```
+![](http://140.125.21.65:8418/Education/Frontend/raw/branch/master/%E9%80%B2%E9%9A%8E_NUXT%E6%A1%86%E6%9E%B6/img/%E5%9C%96%E7%89%871.png)
+
+## 執行前人的NUXT專案
+於下載好後的資料夾中(nuxt-demo 中) 
+
+開啟CMD執行以下
+```
+npm install 
+```
+
+這樣可以直接安裝好此專案所需的套件包
+
+運行
+
+```
+npm run dev 
+```
+即可啟動專案
+
+
+
+## 創建 NUXT
+創建NUXT專案(nuxt-demo)
+
+```
+npx nuxi init nuxt-demo
+```
+
+![](http://140.125.21.65:8418/Education/Frontend/raw/branch/master/%E9%80%B2%E9%9A%8E_NUXT%E6%A1%86%E6%9E%B6/img/%E5%9C%96%E7%89%872.png)
+
+選擇 npm
+
+等安裝好後即可在資料夾下方找到剛剛創建的NUXT專案
+
+![](http://140.125.21.65:8418/Education/Frontend/raw/branch/master/%E9%80%B2%E9%9A%8E_NUXT%E6%A1%86%E6%9E%B6/img/%E5%9C%96%E7%89%873.png)
+
+將這個專案資料夾以 VS CODE 開啟
+
+![](http://140.125.21.65:8418/Education/Frontend/raw/branch/master/%E9%80%B2%E9%9A%8E_NUXT%E6%A1%86%E6%9E%B6/img/%E5%9C%96%E7%89%874.png)
+
+
+### 參考網址 內部有推薦的安裝套件包
+https://wayne-blog.com/2023-01-14/nuxt-try-nuxt3/
+
+於 VSCODE 開啟終端機
+
+![](http://140.125.21.65:8418/Education/Frontend/raw/branch/master/%E9%80%B2%E9%9A%8E_NUXT%E6%A1%86%E6%9E%B6/img/%E5%9C%96%E7%89%875.png)
+
+運行此NUXT # 這個會常用到
+```
+npm run dev 
+```
+
+![](http://140.125.21.65:8418/Education/Frontend/raw/branch/master/%E9%80%B2%E9%9A%8E_NUXT%E6%A1%86%E6%9E%B6/img/%E5%9C%96%E7%89%876.png)
+
+### 靜態路由
+於目錄中創建 pages資料夾(一定要這個名稱的資料夾)
+
+這邊是此框架的一些硬性條件:
+
+於pages資料夾底下創建 index.vue 會直接默認成為首頁 (例:http://localhost:3000)
+
+
+![](http://140.125.21.65:8418/Education/Frontend/raw/branch/master/%E9%80%B2%E9%9A%8E_NUXT%E6%A1%86%E6%9E%B6/img/%E5%9C%96%E7%89%877.png)
+
+若於 pages下創建一個叫 test_file_1 的資料夾 則也需要在底下創建 index.vue (例:http://localhost:3000/test_file_1)
+
+![](http://140.125.21.65:8418/Education/Frontend/raw/branch/master/%E9%80%B2%E9%9A%8E_NUXT%E6%A1%86%E6%9E%B6/img/%E5%9C%96%E7%89%878.png)
+
+![](http://140.125.21.65:8418/Education/Frontend/raw/branch/master/%E9%80%B2%E9%9A%8E_NUXT%E6%A1%86%E6%9E%B6/img/%E5%9C%96%E7%89%879.png)
+
+### 動態路由
+若需要根據使用者或一些動態數據去做頁面顯示
+
+名稱以 [ ] 包住 如下圖所示
+
+![](http://140.125.21.65:8418/Education/Frontend/raw/branch/master/%E9%80%B2%E9%9A%8E_NUXT%E6%A1%86%E6%9E%B6/img/%E5%9C%96%E7%89%8710.png)
+
+輸入網頁 則會出現
+
+![](http://140.125.21.65:8418/Education/Frontend/raw/branch/master/%E9%80%B2%E9%9A%8E_NUXT%E6%A1%86%E6%9E%B6/img/%E5%9C%96%E7%89%8711.png)
+
+若有多個參數 也同理
+
+![](http://140.125.21.65:8418/Education/Frontend/raw/branch/master/%E9%80%B2%E9%9A%8E_NUXT%E6%A1%86%E6%9E%B6/img/%E5%9C%96%E7%89%8712.png)
+
+輸入網頁 則會出現
+
+![](http://140.125.21.65:8418/Education/Frontend/raw/branch/master/%E9%80%B2%E9%9A%8E_NUXT%E6%A1%86%E6%9E%B6/img/%E5%9C%96%E7%89%8713.png)
+
+### 套Bootstrap
+找到選用的Bootstrap
+
+並將資料夾全丟入 public 資料夾裡面
+
+![](http://140.125.21.65:8418/Education/Frontend/raw/branch/master/%E9%80%B2%E9%9A%8E_NUXT%E6%A1%86%E6%9E%B6/img/%E5%9C%96%E7%89%8714.png)
+
+![](http://140.125.21.65:8418/Education/Frontend/raw/branch/master/%E9%80%B2%E9%9A%8E_NUXT%E6%A1%86%E6%9E%B6/img/%E5%9C%96%E7%89%8715.png)
+
+#### 設置layout
+創建 layouts 資料夾 並於底下創建 default.vue (預設路徑就這樣)
+
+![](http://140.125.21.65:8418/Education/Frontend/raw/branch/master/%E9%80%B2%E9%9A%8E_NUXT%E6%A1%86%E6%9E%B6/img/%E5%9C%96%E7%89%8716.png)
+
+並將主要部分換成NUXT的格式
+
+![](http://140.125.21.65:8418/Education/Frontend/raw/branch/master/%E9%80%B2%E9%9A%8E_NUXT%E6%A1%86%E6%9E%B6/img/%E5%9C%96%E7%89%8717.png) 
+![](http://140.125.21.65:8418/Education/Frontend/raw/branch/master/%E9%80%B2%E9%9A%8E_NUXT%E6%A1%86%E6%9E%B6/img/%E5%9C%96%E7%89%8718.png)
+
+匯入css 與js 的方式 如下圖所示進行編輯即可(CHATGPT)
+
+![](http://140.125.21.65:8418/Education/Frontend/raw/branch/master/%E9%80%B2%E9%9A%8E_NUXT%E6%A1%86%E6%9E%B6/img/%E5%9C%96%E7%89%8719.png)
+
+完成後即可查看頁面
+
+![](http://140.125.21.65:8418/Education/Frontend/raw/branch/master/%E9%80%B2%E9%9A%8E_NUXT%E6%A1%86%E6%9E%B6/img/%E5%9C%96%E7%89%8720.png)
+
+