From 55d05b1e21867149dc4bd636a8a54431d057a39e Mon Sep 17 00:00:00 2001 From: leo Date: Thu, 31 Oct 2024 12:56:22 +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 | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 55 insertions(+), 3 deletions(-) diff --git a/NUXT.md b/NUXT.md index f9a920a..d886587 100644 --- a/NUXT.md +++ b/NUXT.md @@ -1,8 +1,8 @@ -## NUXT -### 基於VUE 可以更有效率地進行前端，省了很多路由部分，可以直接創建Page即可開始 +# NUXT +## 基於VUE 可以更有效率地進行前端，省了很多路由部分，可以直接創建Page即可開始 先下載Node.js 並安裝 -於準備的資料夾下方開啟CMD +於準備開發的資料夾下方開啟CMD 檢查有無node.js ``` @@ -10,6 +10,26 @@ 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) ``` @@ -74,3 +94,35 @@ 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%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) + +