> 參考
> 1. https://ithelp.ithome.com.tw/articles/10293273
> 2. https://ithelp.ithome.com.tw/m/articles/10304993
> 3. https://www.prisma.io/docs/orm/overview/databases/mysql

# 前置

- Mysql
- 安裝[node.js](https://nodejs.org/en/download/current)
---
# 手把手創建Nuxt專案

1. 創建資料夾。
2. 終端機進入資料夾並執行 ``` npx nuxi init nuxt-app ```。
3. 如下圖就OK，中間選項是管理工具，我是用npm啦。
4. 終端機執行 ``` cd nuxt-app ```。
5. 終端機執行 ``` npm run dev ```。
6. 如下圖就OK。

7. 點選連結就有Nuxt的模板網頁啦。

---
# 與資料庫連接

1. 一樣在資料夾cmd內 ``` npm install -D prisma @prisma/client ```。

2. 終端機執行``` npx prisma init ```。
3. 執行完會出現prisma資料夾。
4. 接著修改裡面的schema，將```provider```內容修改成```mysql```。

5. 接著修改環境變數，到資料夾的.env檔修改DATABASE_URL成以下格式。 

底下是我的範例
- 記得帳號密碼換成mysql的帳密。
- port預設就是3306不用改。
- 資料庫名稱自己取一個就好，不用到mysql先開。

DATABASE_URL="mysql://帳號:密碼@localhost:3306/資料庫名稱"

6. 在schema.prisma放入我們資料表的格式，這邊可以先用[Prisma官方範例](https://www.prisma.io/docs/orm/prisma-schema/overview#example)給的，整個檔案會如下。

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "mysql"
  url      = env("DATABASE_URL")
}

model User {
  id        Int      @id @default(autoincrement())
  createdAt DateTime @default(now())
  email     String   @unique
  name      String?
  role      Role     @default(USER)
  posts     Post[]
}

model Post {
  id        Int      @id @default(autoincrement())
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  published Boolean  @default(false)
  title     String   @db.VarChar(255)
  author    User?    @relation(fields: [authorId], references: [id])
  authorId  Int?
}

enum Role {
  USER
  ADMIN
}

7. 最後終端機```npx prisma db push``` 就會初始化資料庫了，可以登入mysql看看有沒有新增一個資料庫。

8. 也可以用Prisma Studio 監控
終端機輸```npx prisma studio``` 就會開啟。

# 與資料庫互動

1. 終端機```npx prisma generate```建立client。
2. 建立api : 新增 ./server/api/test-create-user.get.js。

3. test-create-user.get.js檔案程式如下，如果你是用剛剛的資料庫範例，那可參考下方data內容。

import { PrismaClient } from '@prisma/client'

const prismaClient = new PrismaClient()

export default defineEventHandler(() => {
  const user = prismaClient.user.create({
    data: {
      createdAt: new Date("2024-05-14T09:04:17.919Z"),
      email: '[e-mail]',
      name: 'Harry',
      role: 'ADMIN',
    }
  })

  return user
})

4. 網址輸入```http://localhost:3000/api/test-create-user```並進入 (記得伺服器要開著)，這樣就會進行一次api呼叫，畫面如下。

:::info
正常來說要透過程式去呼叫這個api，而且data也不是寫死的，但這裡只是測試，所以....._(:3」∠)
:::
5. 完成就可以看到新增的User啦

---
# prisma 使用

## 初始化

終端機
npx prisma db push

## 遷移(migrate)

終端機
npx prisma migrate dev --name (版本名)

---
# Nuxt 3

## 目錄

- pages 頁面資料夾 : 放入vue頁面及會自動新增router，可供<NuxtLink />使用。slug則是所有未定義介面。
- component 元件資料夾 : 可被其他頁面重複使用，假設內含button1.vue，其他頁面可使用<button1 />來呼叫。setPageLayout()來變更該頁使用layout
- middleware 中介資料夾 : 裡面是一些程式邏輯，通常在頁面渲染前執行，如身份驗證，避免使用者在進入頁面時看到網頁提前渲染出奇怪的東西。

---
# Element-plus

終端機
npm i element-plus @element-plus/nuxt -D

//nuxt.config.js
export default defineNuxtConfig({
  modules: [
    '@element-plus/nuxt'
  ],
  elementPlus: { /** Options */ }
})