Nuxt

本來參加鐵人的初衷就是想要幫自己的side project搬個家，
然後以此繼續寫Test & 架設後端。所以這邊之後就是實作筆記啦！

最後還是決定用熟悉的Nuxt來進行。

Nuxt是Vue常搭配的框架。
我選擇Nuxt主要的原因：

1. 當配熟悉的Vue3
2. 使用SSR伺服器渲染解決SEO問題

簡單來說就是透過伺服器渲染，讓爬蟲可以先爬到資料
這一篇隔壁棚的淺談 CSR、SSR 與 SSG
很完整解釋了SSR的好處

3. 和TS完美配合

這麼說...就是我和Nuxt還不熟啦XD

我也會跟著Nuxt3學習筆記
來做Nuxt專案。也很推薦大家。

起手式

搭配Vue3的Nuxt3還在beta版，一起跟我踩踩雷吧！

npx nuxi init ${你的專案名稱}
cd 你的專案名稱
npm install
npm run dev //相當於nux

安裝Tailwind

今年年初很潮地跟了一下Tailwind，搬家後一樣使用。

//安裝
npm install -D @nuxtjs/tailwindcss

//在nuxt.config設定module:
modules: ['@nuxtjs/tailwindcss']

//tailwind 初始化
npx tailwindcss init

其他

另外雖然官方說支援熱更新，但踩雷經驗如果沒有即時更新的話，
可以嘗試在Nuxt.config
裡做以下設定。
(還有Vue的dev-tool沒有反應時)

import {defineNuxtConfig} from 'nuxt';

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  vue: {
        config: {
            productionTip: false,
            devtools: true
        }
    },
    vite: {
        server: {
            
            watch: {
                usePolling: true //set here to enable hot reload
            }
        },
    },
    autoImports: {
        global: false //關掉的話更新跑的比較快
    },
    components: {
        global: false //關掉的話更新跑的比較快
    }
});

目前規劃：

├─ 1.搬家
   └─ 1-A.Layout
        └─ Header
        └─ Sidebar
   └─1-B.Page
        └─ 安裝&設定Pinia
        └─ 安裝&設定Router
        └─ 首頁
        └─ Map頁面
        └─ 其他Nuxt 設定(SEO等等...)
├─ 2.新增頁面
    └─ - Quizz Page -->new
├─ 3.寫測試
├─ 4.來初探後端玩玩Laravel (Laravel是可以玩的嗎...)

以上！

鐵人快結束了，但專案不會搬完，想寫的也不會寫完。
鐵人結束後會繼續搬家的。

環遊非洲第26天-有山有海有沙漠的摩洛哥

連續幾天推坑旅遊景點。
摩洛哥相信大家都聽過，她也位於非洲大陸上，靠近非洲的北部。
摩洛哥可是旅遊大國，著名的景點包括Chefchaouen 藍色之城，還擁有非洲最大的滑雪場、
世界最古老的大學。來這邊可以穿著傳統服飾Djellaba 長袍，吃美食。

摩洛哥最大城市：卡薩布蘭卡，因為北非諜影<卡薩布蘭卡>而出名，現在的名稱為達爾貝達（Dar el Beida），是靠近大西洋的一座重要的港口城、經濟中心、交通樞紐，優越的地理位置，與西班牙隔海相望，使她在歷史上一直是西方的殖民地，包括西班牙以及法國，在二戰時被親德政權統治，也是電影北非諜影的背景。雖然卡薩布蘭卡是摩洛哥人口最多的城市，但他可不是摩洛哥首都！首都是拉巴特(Rabat)喔！
摩洛哥境內可看海、看山、還有沙漠，一直都是西方拍攝電影影集的地方，權力的遊戲前幾季龍後的故事線奴隸的港口「Astapor」（阿斯塔波）和「Yunkai」（淵凱城）都是在摩洛哥拍攝的呢！

摩洛哥Chefchaouen 藍色之城

圖片來源