Vue,Nuxt

Nuxt4 安裝

清除 npx 快取

確保 Nuxt CLI 不存在快取或版本上的差異，可以清除快取來重新安裝。

1
npx clear-npx-cache

Nuxt 安裝

Node版本號 22.13.1
安裝指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
// pnpm
pnpm create nuxt@latest <project-name>
// yarn 
yarn create nuxt <project-name>
// npm
npm create nuxt@latest <project-name>

create-nuxt@3.34.0
Ok to proceed? (y) 


> npx
> create-nuxt nuxt_demo_project


        .d$b.
       i$$A$$L  .d$b
     .$$F` `$$L.$$A$$.
    j$$'    `4$$:` `$$.
   j$$'     .4$:    `$$.
  j$$`     .$$:      `4$L
 :$$:____.d$$:  _____.:$$:
 `4$$$$$$$$P` .i$$$$$$$$P`

┌  Welcome to Nuxt!
│載入模板
◇  Templates loaded
◇ 從快取載入模板
◇  Templates loaded 
│  
│◆ 您想使用哪一個範本？
◆  Which template would you like to use?
content – 內容驅動網站

○ minimal – Nuxt 4 的極簡配置（建議）
│  ● minimal – Minimal setup for Nuxt 4 (recommended)
○ module – Nuxt 模組
│  ○ module – Nuxt module
●. * ui – 使用 Nuxt UI 的應用
│  ○ ui – App using Nuxt UI
◇  在 nuxt4_demo_project 中建立項目
◇  Creating project in nuxt4_demo_project
◇ 已下載最小模板
◇  Downloaded minimal template
│

◆ 您想使用哪個軟體套件管理器？
◆  Which package manager would you like to use?
│  ● npm (current)
│  ○ pnpm
│  ○ yarn
│  ○ bun
│  ○ deno
◆ 初始化 Git 倉庫？
Initialize git repository?
│  No
│
◇ 已安裝依賴項
◇  Dependencies installed
│
│ ◇ 是否要瀏覽並安裝模組？
◇  Would you like to browse and install modules?
│  Yes
│
│ ◇ 已載入模組
◇  Modules loaded
│
│ ◇ 搜尋並選擇模組：
│  0 items selected
│
└  ✨ Nuxt 專案是使用最小範本建立的。
└  ✨ Nuxt project has been created with the minimal template.

╭── 👉 Next steps ───────────╮
│                            │
│   › cd demo_nuxt_project   │
│   › npm run dev            │
│                            │
╰────────────────────────────╯
larahuang@larahuang Nuxt % cd demo_nuxt_project
larahuang@larahuang demo_nuxt_project % npm run dev   

Nuxt 4.4.2 (with Nitro 2.13.3, Vite 7.3.2 and Vue 3.5.32)
                                                                   下午1:57:17
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

預設監聽 Port: 3000，若因為衝突或有需要做調整可以使用這個參數

1
2
3
npm run dev -- -p 5173
# 等價
npx nuxi dev -p 5173

建立 .env 檔案：在專案根目錄建立 .env 檔案，定義您的環境變數。

1
2
API_BASE_URL=https://example.com

清除自動產生的 Nuxt 檔案和快取

1
npx nuxi cleanup

Nuxt 3 實戰筆記

nuxt4架構

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
├── .nuxt/                 # Nuxt開發中，根據目錄結構生成。
├── .output/               # Nuxt build 後的輸出目錄（用於部署）
├── .env                   # 環境配置檔
├── plugins/               # 套件
├── public/                # 靜態公開檔案
├── server/                # 放後端邏輯
│   └── api/
│       └── order.js       # 對應 /api/order
├── app.vue                # Nuxt 應用入口點
   ├── app.vue                # 入口點
   ├── layouts/               # 自訂佈局
   ├── middleware/            # 中介層邏輯
   ├── assets/                # 靜態資源
   ├── components/            # Vue 元件
   ├── composables/           # 邏輯函式
   ├── content/               # 資料檔案
   ├── pages/                 # 頁面檔案
├── nuxt.config.ts         # Nuxt 配置設定檔（支援 TypeScript）
├── package.json           # 套件與指令設定
├── tsconfig.json          # TypeScript 設定
└── README.md              # 專案說明

安裝Tailwindcss

參考Nuxt UI 官網

安裝 Nuxt UI 套件

1
npm install @nuxt/ui tailwindcss --save

將 Nuxt UI 模組新增到您的系統中nuxt.config.ts

1
2
3
export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})

在您的 CSS 中匯入 Tailwind CSS 和 Nuxt UI

app/assets/css/main.css nuxt.config.ts

1
2
3
// app/assets/css/main.css 
@import "tailwindcss";
@import "@nuxt/ui";

.vscode/settings.json

1
2
3
4
5
6
7
8
9
10
11
{
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
    "strings": "on"
  },
  "tailwindCSS.classAttributes": ["class", "ui"],
  "tailwindCSS.classFunctions": ["defineAppConfig"]
}

安裝. ElementPLus

1
2
3
npm i @element-plus/nuxt -D
npm i --save element-plus
npm i --save @element-plus/icons-vue

https://github.com/element-plus/element-plus-nuxt-starter/tree/main

配置

nuxt.config.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
export default defineNuxtConfig({
  // 模組新增到您的系統中nuxt
  modules: [
    '@nuxt/eslint',
    '@nuxt/ui',
    '@element-plus/nuxt'
  ],
  // 開發者工具
  devtools: {
    enabled: true
  },
  // 樣式
  css: ['~/assets/scss/main.scss'],
  // 路由規則
  routeRules: {
    // 預渲染
    '/': { prerender: true }
  },
  // 相容性日​​期
  compatibilityDate: '2025-01-15',
  // 相容性日​​期
   vite: {
    css: {
      // 預處理器選項：
      preprocessorOptions: {
        scss: {
          // 附加數據
          additionalData: `@use "@/assets/scss/element/index.scss" as element;`
        }
      }
    }
  },
  // elementPlus
  elementPlus: {
    icon: 'el-icon',
    importStyle: 'scss',
    themes: ['dark']
  }
})