---
title: 2024程設筆記
tags: 2024
author: xCk27x
---

# 第一次上課

###### tags: `2024`

:::info
今天會把前端要用的其他技術帶過，但畢竟只有兩個小時，鐵定是教不完，所以如果你很有熱忱想要學得更多，請直接去查官方網站的Docs。
:::

## 授課進度

- [ ] Nuxt
- [ ] pinia
- [ ] Sass
- [ ] Tailwind

## Nuxt
簡單來說，Nuxt就是在vue之上再套一層框架，當然你會覺得怎麼寫vue已經夠麻煩了，幹嘛要在多套一層框架。
實際上Nuxt是以限制一些自由，來幫你直接做好某些功能，等於省了一堆麻煩，反正我用過是回不去了啦。

:::info
跟Nuxt類似的東西有React的延伸框架「Next.js」，Angular我就不知道了，反正他快被Sevlte取代了XD。
:::

### 建立新Nuxt專案

開一個新的資料夾，Terminal中輸入

npx nuxi@latest init <project-name>
cd <project-name>

> 如果看到node.js或npm有版本可以更新，建議都先不要，改了之後整個專案可能會都會執行不了。

建好專案之後，你應該會看到如下的資料夾結構

<img src="https://hackmd.io/_uploads/SJlA6D0Ca.jpg" width="200px">

最外層的資料夾(如public server...)都代表了某些特定功能，所以資料夾名字**不能亂取**，檔案也不能亂放。

### 資料夾結構

<img src="https://hackmd.io/_uploads/SJ7tCwART.jpg" width="200px">

沒錯，就是這麼多XD，但好消息是你用不到全部，所以這裡只講一些重要的跟常用的。

- components: 放的是**會重複用到**的vue檔案，所有components資料夾下的所有vue檔案都會自動被nuxt載入，意思是你不需要在要引入的檔案中使用

// 今天有一個Button.vue在的位置在

| components/
--| base/
----| foo/
------| Button.vue

// 則這個元件的全局名稱叫 <BaseFooButton />

- layout: **固定**出現在畫面某位置的元件，例如navbar。範例中slot為layout元件內層標籤的放置位置。

// layouts/default.vue

<template>
<div>
<p>default layout</p>
<slot /> // NuxtPage的內容
</div>
</template>

// pages/about.vue

<template>
<NuxtLayout name:"default">
<NuxtPage />
</NuxtLayout>
</template>

- pages: 根據你的資料夾路徑決定頁面的路由(nuxt最重要的功能: 不用管理Router了)

// (特別) index.vue代表當前資料夾名稱的頁面

-| pages/
---| index.vue // localhost:3000
---| user/
-----| index.vue // localhost:3000/user
-----| profile.vue // localhost:3000/user/profile
---| good-[id]/ // 動態路由
-----| [price].vue
---|_slug.vue // 匹配不到時就跳到這頁面

動態路由: 路由中的變數可以被頁面取得，以上面當例子，如果我點擊```<NuxtLink to="localhost:3000/good-10/200" />```，則你可以利用下面的程式碼取得id跟price的值。

<script setup>
const route = useRoute();
let [id, price] = route.params;
</script>

- public: 放不會在build過程中使用到的靜態檔案，所以到時候你們用到的圖片都會存在這裡。
- server: nuxt的特色之一，可以在這個資料夾裡面寫後端的API，也可以使用資料庫。如果你的後端需求不高的話可已考慮。
- nuxt.config.ts: 整個nuxt專案的設定檔。如果你要新增某些plugin(tailwind, pinia)，或是更改nuxt工作的設定，來這邊就對了。

### pinia
> 這是去年幾乎沒用到的東西，但後來發現他可以很大程度的改善網站，一定要知道。

pinia是vue跟nuxt官方推薦的**狀態(state)管理工具**

...你說狀態是甚麼? 
其實你就把狀態想像成儲存在nuxt裡的全域變數，如果某些資料會在差異很大的地方同時用到，或是要在檔案之間傳來傳去很麻煩，那拜託要想起有個東西叫State。

1. 在專案根目錄底下創建一個stores資料夾
2. 如果你今天想建立一個全域變數叫counter，那就建立counter.js
3. 建立新store

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
// 此store的state
const count = ref(0)

// computed代表計算函數，以不改變count的值為原則
const doubleCount = computed(() => count.value * 2)

// function是store的方法，可以對state進行操作
function increment() {
count.value++
}

return { count, doubleCount, increment }
})

:::warning
use[Var]Store 雖然不是硬性規定，但請遵守命名規則，避免別人看不出這是Store相關函數。
:::

4. 取出counter的值並使用內建函數。

<script setup>
import { useCounterStore } from '@/stores/counter'

// 請注意，counterStore裡的state已經是ref了
const counterStore = useCounterStore()

// doubleCount後面不要加()
let doubleValue = counterStore.doubleCount

counterStore.increment()
</script>

> 至於怎麼解構state之類的進階問題，請直接去查[官方文檔](https://pinia.vuejs.org/zh/)，沒幾頁，你大概30分鐘就可以看完了。

## Sass
讓你的css規律好看些，並且重複性那麼高
:::info
Sass 分兩種 - SASS & SCSS，主要用SCSS，因為它兼容css，也比較好讀。
:::

.footer {
background-color: black;
color: white;

/* .footer_section */
&_section {
padding: 8px 12px;

/* .footer_section:first-child */
&:first-child{
padding-left: 20px;
}
}

/* .footer a */
& a {
text-decoration: none;
}
}

當然還有其他功能，@mixin、@include、@extend...，但一來他們比較複雜，二來nuxt中有些功能並無法完整實現，所以有興趣自己試試就好。

## Tailwind

>跟TypeScript、Svelte共稱前端三大用過就回不去的開發工具。

直接看範例應該就懂了

<template>
<!-- 手機版 -->
<div class="pt-[10vh] h-screen w-screen gird-row-30vh-20vh-1fr phone">
<button class="row-start-2 flex justify-center items-end active:scale-105 transition-all" @click="jumpPortal">
<img src="/jump/phone-portal.png" alt="portal" class="h-[28vw] max-h-[100%]">
</button>
<NuxtLink to='/' class=" row-start-4 flex justify-center items-start active:scale-105 transition-all">
<img src="/jump/phone-turnBack.png" alt="back" class="h-[22vw] max-h-[100%]">
</NuxtLink>
<div class="row-start-5 flex justify-center p-[3vh] pl-0 gap-[2vh]">
<div class="">
<img src="/jump/rabbit.png" alt="enable" class="h-[80%]">
</div>
<div class="pt-[4vh]">
<button class=" active:scale-105 transition-all" @click="jumpRegister">
<img src="/jump/phone-enable.png" alt="enable" class="w-[28vh]">
</button>
</div>
</div>
</div>
</template>

這是2023年跳轉頁面的template，你會每個元素的class都很長一條，這就是tailwind的特色，**每一項css屬性都獨立成一種class**，讓你在編輯html時可以同時排版。

當然我們講不完所有class，所以先挑一些常用到的來介紹。

1. ```class="p-12"``` -> padding: 3rem;
2. ```class="m-6"``` -> margin: 1.5rem;
3. ```class="h-1/2"``` -> height: 50%;
4. ```class="w-full"``` -> margin: 100%;
5. ```class="none"``` -> display: none;
6. ```class="flex justify-center items-center"``` -> display: flex; justify-content: center; align-item: center;
7. ```class="active:scale-150"``` -> (when element is active) transform: scale(1.5)
8. ```class="relative"``` -> position: relative;
9. ```class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"``` -> position: absolute; top: 50%; left: 50%; transform: translateX(-50%); transform: translateY(-50%);

### 自訂屬性

如果tailwind沒有提供某些特定的值，例如```top: 66%;``` 你可以用中括號自訂```class="top-[66%]"```

> 但有些屬性的自定義方法可能跟你想的不太一樣，感覺怪怪的畫技的上網查一下。

## Swagger

晚點補== d