Education/Frontend
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新 進階_NUXT框架/README.md

Browse Source
This commit is contained in:
leo 2025-01-07 17:18:20 +08:00
parent 84a24f6f57
commit d08ad907ec
1 changed files with 20 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
進階_NUXT框架/README.md
View File

@ -8,7 +8,7 @@
``` ```
npm -v 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) ![](http://leovip125.ddns.net: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專案
於下載好後的資料夾中(nuxt-demo 中) 於下載好後的資料夾中(nuxt-demo 中)
@ -36,17 +36,17 @@ npm run dev
npx nuxi init 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) ![](http://leovip125.ddns.net: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 選擇 npm
等安裝好後即可在資料夾下方找到剛剛創建的NUXT專案 等安裝好後即可在資料夾下方找到剛剛創建的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) ![](http://leovip125.ddns.net: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 開啟 將這個專案資料夾以 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) ![](http://leovip125.ddns.net: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)
### 參考網址 內部有推薦的安裝套件包 ### 參考網址 內部有推薦的安裝套件包
@ -54,14 +54,14 @@ https://wayne-blog.com/2023-01-14/nuxt-try-nuxt3/
於 VSCODE 開啟終端機 於 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) ![](http://leovip125.ddns.net: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 # 這個會常用到 運行此NUXT # 這個會常用到
``` ```
npm run dev 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) ![](http://leovip125.ddns.net: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資料夾(一定要這個名稱的資料夾)
@ -71,58 +71,58 @@ npm run dev
於pages資料夾底下創建 index.vue 會直接默認成為首頁 (例:http://localhost:3000) 於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) ![](http://leovip125.ddns.net: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) 若於 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://leovip125.ddns.net: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://leovip125.ddns.net: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://leovip125.ddns.net: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://leovip125.ddns.net: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://leovip125.ddns.net: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) ![](http://leovip125.ddns.net: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
找到選用的Bootstrap 找到選用的Bootstrap
並將資料夾全丟入 public 資料夾裡面 並將資料夾全丟入 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://leovip125.ddns.net: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) ![](http://leovip125.ddns.net: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 #### 設置layout
創建 layouts 資料夾 並於底下創建 default.vue (預設路徑就這樣) 創建 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) ![](http://leovip125.ddns.net: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的格式 並將主要部分換成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://leovip125.ddns.net: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) ![](http://leovip125.ddns.net: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) 匯入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://leovip125.ddns.net: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) ![](http://leovip125.ddns.net: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)