# Nuxt3 王育成 --- # CSR vs SSR ---- ## CSR #### Client-Side Rendering #### (客戶端渲染) ----  ---- - 優點 - 減少 Server 端的壓力 - 頁面切換速度快 - 缺點 - 首屏顯示慢 - SEO不佳 ---- ## SSR #### SR - Server-Side Rendering #### (伺服器端渲染) ----  ---- 是網頁上面呈現的內容在伺服器端就已經生成好了，當用戶瀏覽網頁時，伺服器把這個在服務端生成好的完整的html結構內容響應給瀏覽器，而瀏覽器拿到這個完整的html結構內容後直接顯示(渲染)在頁面上的過程。 --- ### 就是這樣 ### 所以有了 Nuxt ---- ### 沒錯正式進入我們的主題 ---- ### Nuxt3 --- ## 請先在你的Terminal 下 ``` node -v ``` ----  ---- ### node -v的版本要在16.10之上 如果沒有的話 ---- [點此下載]( https://nodejs.org/zh-tw/download) 先把原本的版本砍掉再裝喔! ---- 裝好後創個資料夾 再 cd 進去裡面 ----  ---- ## 開始裝 nuxt3的專案 ---- ### 請注意一定要在你創的資料夾內下 ``` npx nuxi init <project-name> ```  ---- 再cd進去你的專案  ---- ### 進去之後再下 ``` npm install ``` ``` npm run dev ```   --- 把app.vue刪除掉後 新增一個pages的資料夾 裡面再新增兩個.vue的檔案  ---- 在index.vue輸入 ``` <template> <div> <h2>I am Home page</h2> <p>Today is my birthday, Today is not my birthday. </p> <p>Today is not my birthday, Today is my birthday.</p> </div> </template> ``` ---- 在about.vue輸入 ``` <template> <div> <h2>I am about page</h2> <p>You should give me a gift, you should not me give a gift. </p> <p>You should not give me a gift, you should give me a gift. </p> </div> </template> ``` ---- 看一下你的網頁 在local3000的地方 預設是出現index.vue ---- 如果你直接在網址後面多加 /about 就會出現about.vue的內容 ---- 那如果你不是打/about 而是 / products? ---- 沒錯你會看到一個404的錯誤 --- 在pages底下再新增一個資料夾 並建立兩個.vue的檔案  ---- 在products裡的index.vue內輸入 ``` <template> <div> <h2>I am Products</h2> <p>Choice an object as my birthday gift.</p> <p>Don't choice an object as my birthday gift.</p> </div> </template> ``` ---- 在[id].vue中輸入 ``` <template> <div> <h2>Product for {{ }}</h2> </div> </template> <script setup> const {}= useRoute().params </script> ``` ---- 請問const{ } 和 {{}}要填入甚麼 可以達到下圖的效果  --- 再專案內新增一個layouts的資料夾 並新增一個default.vue檔  ---- 再default.vue中輸入 ``` <template> <div> <header> <nav> <ul> <li><NuxtLink to ="/about">about</NuxtLink></li> <li><NuxtLink to ="/products">Products</NuxtLink></li> <li><NuxtLink to ="/">Home</NuxtLink></li> </ul> </nav> </header> <div> <slot /> </div> </div> </template> ``` ---- 之後再到在新增一個products的lyaouts ---- ``` <template> <div> <div> <slot /> </div> <footer> <nav> <ul> <li><NuxtLink to ="/about">about</NuxtLink></li> <li><NuxtLink to ="/products">Products</NuxtLink></li> <li><NuxtLink to ="/">Home</NuxtLink></li> </ul> </nav> </footer> </div> </template> <style> .router-link-active{ color:red } li{ font-size: 25px; } </style> ``` ---- 最後再到[id].vue跟index.vue中輸入 ---- ``` definePageMeta({ layout :'products' }) ```