From 3710e0d6b619dc3764714ce043a5b35403d35696 Mon Sep 17 00:00:00 2001 From: leo Date: Thu, 31 Oct 2024 12:44:03 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20NUXT?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- NUXT.md | 77 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 76 insertions(+), 1 deletion(-) diff --git a/NUXT.md b/NUXT.md index 2158025..f9a920a 100644 --- a/NUXT.md +++ b/NUXT.md @@ -1 +1,76 @@ -歡迎使用 Wiki！ \ No newline at end of file +## 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) + +``` +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) +