Nuxt 3元件開發與管理

Amd794發表於2024-06-20
UX元件

title: Nuxt 3元件開發與管理
date: 2024/6/20
updated: 2024/6/20
author: cmdragon

excerpt:
摘要：本文深入探討了Nuxt 3的元件開發與管理，從基礎概念、安裝配置、目錄結構、元件分類與開發實踐、生命週期與最佳化，到測試與維護策略。詳細介紹了Nuxt 3的核心特點，如伺服器端渲染（SSR）、靜態站點生成（SSG）以及與Vue生態系統的無縫整合。文章以Nuxt 3為基礎，指導開發者如何高效構建高效能、可維護的Vue應用程式。內容涵蓋了基本元件的定義與分類、獨立元件與函式式元件的示例、Props和Slots的使用、Composition API的引入，以及元件的生命週期與最佳化方法。同時，文章還提供了元件開發的實踐案例，包括自定義元件開發、非同步載入元件、事件與方法的使用，以及元件測試與文件化指南。透過結構化的目錄組織與詳細的程式碼示例，旨在幫助開發者高效管理與維護元件，實現程式碼的複用與模組化。

categories:

  • 前端開發

tags:

  • Vue
  • Nuxt3
  • 元件開發
  • 管理策略
  • 生命週期
  • 效能最佳化
  • 測試文件

image

image

掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長

第1章：Nuxt 3簡介

1.1 Nuxt 3概述

1.1.1 什麼是Nuxt.js Nuxt.js是一個基於Vue.js的開源框架，專為構建高效能、可維護的伺服器渲染和靜態站點生成應用而設計。Nuxt 3是其最新版本，它採用Vue 3和TSX（TypeScript的擴充套件）作為基礎，提供了更簡潔的API和更好的效能。

1.1.2 Nuxt 3特點

  • 伺服器端渲染（SSR）：提高SEO和初始載入速度。
  • 前端應用（SPA）：現代的單頁應用體驗。
  • 靜態站點生成（SSG）：支援快速的靜態內容部署。
  • 整合強大：與Vue生態系統無縫整合，如Vuex、Vuex-ORM等。

1.2 安裝與配置

1.2.1 安裝Nuxt 3 在命令列中執行以下命令安裝Nuxt 3 CLI：

npm install -g npx
npx create-nuxt-app my-app

或者使用Yarn：

yarn global add create-nuxt-app
create-nuxt-app my-app

1.2.2 配置基本專案

  • 進入專案目錄：cd my-app
  • 配置nuxt.config.ts：設定基礎配置，如目標環境、SSR、SSG等。
// nuxt.config.ts
export default {
  target: 'server', // 或者 'static', 根據需求選擇
  // 更多配置...
}

1.3 基本架構介紹

1.3.1 專案結構

  • pages：存放所有路由相關的元件，如pages/index.vue。
  • components：存放可複用的Vue元件。
  • layouts：定義頁面佈局，如layouts/default.vue。
  • plugins：全域性或區域性外掛。
  • store：Vuex狀態管理。

1.3.2 主要元件型別

  • Layouts: 共享的頁面結構，如頭部、尾部和主要內容區域。
  • Pages: 與特定路由關聯的元件，處理業務邏輯和檢視。
  • Modules: 對專案進行分模組管理，如API、狀態管理等。

1.3.3 CLI命令

  • nuxt generate：生成靜態站點。
  • nuxt start：啟動開發伺服器。
  • nuxt build：構建生產環境。

第2章：Nuxt 3元件基礎

2.1 元件定義與分類

2.1.1 元件定義 在Nuxt 3中，元件是可複用的程式碼塊，可以是Vue元件或自定義的函式式元件。Vue元件使用.vue副檔名，而函式式元件使用<script setup>語法。

2.1.2 元件分類

  • 獨立元件（Single File Components, SFC）：如.vue檔案，包含模板、邏輯和樣式。
  • 函式式元件（Functional Components）：使用<script setup>，更簡潔，側重於邏輯和資料處理。
  • 元件庫：預編譯的元件集合，可以自定義或使用第三方庫。

2.2 簡單元件示例

2.2.1 獨立元件示例

<!-- pages/components/Button.vue -->
<template>
  <button :class="{ active: isActive }">{{ buttonText }}</button>
</template>

<script>
export default {
  props: {
    buttonText: { type: String, required: true },
    isActive: { type: Boolean, default: false }
  }
}
</script>

2.2.2 函式式元件示例

<!-- pages/components/Button.vue -->
<script setup>
import { ref } from 'vue'

const buttonText = ref('Click me')
const isActive = ref(false)

function handleClick() {
  isActive.value = !isActive.value
}

function render() {
  return <button :class="{ active: isActive.value }" @click={handleClick}>{buttonText.value}</button>
}

export default {
  render
}
</script>

2.3 Props和Slots的使用

2.3.1 Props（屬性）

  • Props是元件間的通訊方式，父元件向子元件傳遞資料。
  • props物件定義元件接受的屬性，如上述按鈕元件的buttonText和isActive。

2.3.2 Slots（插槽）

  • Slots用於在元件中定義可替換的部分，父元件可以透過<slot>標籤傳遞內容給子元件。
  • 子元件可以使用<template v-slot>來定義預設插槽或命名插槽。

2.4 使用Composition API

2.4.1 Refs（響應式引用）

  • Composition API引入了ref，用於建立響應式的變數，如上述isActive和buttonText。

2.4.2 Setup Function（設定函式）

  • setup函式是元件的邏輯核心，替代了.vue檔案中的export default部分，用於匯入和匯出函式、變數和方法。
<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}

export default {
  onMounted() {
    // 在元件掛載後執行
  },
  methods: {
    increment
  }
}
</script>

第3章：元件開發實踐

3.1 自定義元件開發

3.1.1 元件結構

在Nuxt 3中，自定義元件通常包含<template>、<script setup>和<style>部分。

  • <template>：定義元件的檢視結構，包括HTML結構和模板指令。
  • <script setup>：定義元件的邏輯，包括資料、計算屬性、方法、生命週期鉤子等。
  • <style>：定義元件的樣式，可以使用CSS、SCSS、LESS等。

例如，建立一個名為MyComponent.vue的自定義元件：

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="increment">Count: {{ count }}</button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const title = 'My Component'
const count = ref(0)

const increment = () => {
  count.value++
}
</script>

<style>
h1 {
  color: red;
}
</style>

3.1.2 元件例項

每個元件都有一個例項，可以透過this關鍵字訪問元件內部的變數和方法。

在<script setup>中，可以使用defineProps、defineEmits、defineExpose等API來定義屬性和方法。

例如，在上面的MyComponent.vue中，可以使用defineProps來定義title屬性：

<script setup>
import { ref, computed, defineProps } from 'vue'

const count = ref(0)
const increment = () => {
  count.value++
}

const props = defineProps({
  title: {
    type: String,
    required: true
  }
})
</script>

在父元件中，可以使用v-bind來傳遞title屬性：

<template>
  <div>
    <MyComponent :title="'Custom Title'" />
  </div>
</template>

3.2 非同步載入元件

在 Nuxt 3 中，可以使用非同步載入來延遲載入元件，從而提高應用程式的效能和使用者體驗。

3.2.1 動態匯入

可以使用動態匯入來非同步載入元件。在<script setup>中，可以使用import關鍵字來動態匯入元件：

<template>
  <div>
    <AsyncComponent v-if="showAsyncComponent" />
    <button @click="showAsyncComponent = true">Load Async Component</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const showAsyncComponent = ref(false)

const AsyncComponent = () => import('./AsyncComponent.vue')
</script>

在上面的例子中，AsyncComponent是一個動態匯入的元件，只有在點選按鈕時才會載入。

3.2.2 非同步資料

如果元件需要載入非同步資料，可以在<script setup>中使用async/await來載入資料，並在資料載入完成後渲染元件。

例如，在下面的例子中，AsyncDataComponent元件需要載入一個非同步資料：

<template>
  <div>
    <AsyncDataComponent v-if="dataLoaded" :data="data" />
    <button @click="loadData">Load Data</button>
  </div>
</template>

<script setup>
import { ref, defineAsyncComponent } from 'vue'

const dataLoaded = ref(false)
const data = ref(null)

const AsyncDataComponent = defineAsyncComponent(() =>
  import('./AsyncDataComponent.vue')
)

const loadData = async () => {
  dataLoaded.value = false
  const response = await fetch('https://api.example.com/data')
  data.value = await response.json()
  dataLoaded.value = true
}
</script>

在上面的例子中，點選按鈕時會呼叫loadData方法，載入非同步資料，並在資料載入完成後渲染AsyncDataComponent元件。

3.3 事件與方法

方法(Methods)

在 Nuxt 3 中，元件內的方法是透過在 <script setup> 或 <script> 標籤中定義 methods 物件來實現的。這些方法可以在模板中被呼叫，也可以在元件內部的其他方法中被呼叫。

以下是一個簡單的示例：

<template>
  <button @click="increment">點選我</button>
  <p>{{ count }}</p>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0);

const increment = () => {
  count.value++;
};
</script>

在這個例子中，increment 方法會在點選按鈕時被呼叫，使得 count 的值增加。

事件(Events)

自定義事件

元件可以透過 $emit 方法發出自定義事件，父元件可以透過監聽這些事件來響應。

以下是如何在子元件中發出一個自定義事件的示例：

<template>
  <button @click="sendEvent">傳送事件</button>
</template>

<script setup>
const emit = defineEmits(['custom-event']);

const sendEvent = () => {
  emit('custom-event', { message: 'Hello from child component!' });
};
</script>

父元件可以像這樣監聽這個事件：

<template>
  <ChildComponent @custom-event="handleCustomEvent" />
</template>

<script setup>
const handleCustomEvent = (payload) => {
  console.log(payload.message); // 輸出: Hello from child component!
};
</script>

原生事件

你還可以在元件上直接監聽原生 DOM 事件，如下所示：

<template>
  <input type="text" @input="handleInput" />
</template>

<script setup>
const handleInput = (event) => {
  console.log(event.target.value); // 輸出輸入框的值
};
</script>

使用 Vuex 中的事件和方法

如果在使用 Vuex 來管理狀態，你可能會在元件中呼叫 Vuex 的 actions 或 mutations。

<template>
  <button @click="increment">增加</button>
</template>

<script setup>
import { useStore } from 'vuex';

const store = useStore();

const increment = () => {
  store.dispatch('increment');
};
</script>

在這個例子中，當按鈕被點選時，會呼叫 Vuex store 中的 increment action。

第4章：元件組織與管理

4.1 元件目錄結構
在 Nuxt.js 3.x 中，元件目錄結構非常靈活，你可以根據專案需求自定義元件的存放位置。但是，為了保持程式碼結構的清晰和可維護，建議按照以下目錄結構組織元件：

  1. 通用元件：將所有可複用的元件放在components目錄中。例如：

    components/
  - Button.vue
  - Input.vue
  - Icon.vue

  2. 頁面元件：每個頁面元件都可以作為一個單獨的.vue檔案存在，並放在pages目錄中。例如：

    pages/
  - index.vue
  - about.vue
  - products/
    - index.vue
    - product-1.vue

  3. 佈局元件：佈局元件可以放在layouts目錄中。例如：

    layouts/
  - default.vue
  - admin.vue

  4. 外掛：如果你需要在元件中使用第三方庫或自定義外掛，可以將它們放在plugins目錄中。例如：

    plugins/
  - third-party.js
  - custom.js

  5. 模組：如果你需要在專案中使用自定義模組，可以將它們放在modules目錄中。例如：

    modules/
  - custom-module.js

4.2 分級元件和模組化

在 Nuxt 3 中，元件化和模組化是兩個核心概念，它們有助於構建可維護和可擴充套件的應用程式。以下是關於 Nuxt 3 中的分級元件和模組化的詳細說明：

分級元件（Hierarchical Components）

分級元件指的是元件之間的巢狀關係，這種關係可以幫助我們構建複雜的使用者介面。在 Nuxt 3 中，元件可以按照以下方式組織：

  1. 根元件：通常位於 pages 目錄下的 .vue 檔案，它們是頁面的入口。
  2. 子元件：可以在頁面元件中或其它元件中巢狀使用的元件。子元件通常放在 components 目錄下，並可以進一步細分為子目錄，以反映它們的功能或用途。

以下是一個分級元件的例子：

components/
  - Header/
    - Logo.vue
    - Navigation.vue
  - Footer/
    - Contact.vue
    - SocialLinks.vue
  - Hero.vue
  - ArticleList.vue

在這個結構中，Header 和 Footer 目錄包含了與它們相關的子元件，而 Hero 和 ArticleList 是獨立的元件。

模組化（Modularization）

模組化是一種將程式碼分解成可重用模組的方法，每個模組都專注於一個特定的功能。在 Nuxt 3 中，模組化可以透過以下方式實現：

  1. Nuxt 模組：Nuxt 3 支援透過 modules 目錄或 nuxt.config.ts 檔案自動註冊本地或第三方模組。這些模組可以擴充套件 Nuxt 的核心功能或提供額外的工具。
  2. 可複用邏輯：將可複用的邏輯（如 API 呼叫、狀態管理、工具函式）放在單獨的檔案或目錄中，然後在需要的地方匯入它們。

以下是一個模組化的例子：

composables/
  - useApi.js
  - useAuth.js
  - useUtils.js

store/
  - index.js

utils/
  - helpers.js
  - validators.js

在這個結構中，composables 目錄包含了可複用的組合式函式，store 目錄包含了狀態管理邏輯，而 utils 目錄包含了工具函式和驗證器。

結合分級元件和模組化

在 Nuxt 3 中，你可以將分級元件和模組化結合起來，建立一個既清晰又易於維護的專案結構：

  • 使用分級元件來組織你的使用者介面。
  • 使用模組化來組織你的應用邏輯。

透過這種方式，你可以確保每個元件都專注於展示邏輯，而模組則處理應用的業務邏輯，從而實現關注點分離。例如：

components/
  - Header.vue
  - Header/
    - Logo.vue
    - Navigation.vue
  - Footer.vue
  - Footer/
    - Contact.vue
    - SocialLinks.vue
  - ArticleList.vue

composables/
  - useHeader.js
  - useFooter.js

store/
  - index.js

utils/
  - helpers.js

在這個結構中，Header 和 Footer 元件可以匯入對應的 useHeader 和 useFooter 組合式函式來獲取所需的資料和邏輯。這樣的組織方式有助於保持程式碼的清晰和可維護性。

4.3 使用Layouts和Modules

Nuxt 3 中的 Layouts 和 Modules 是兩個重要的概念，它們可以幫助你構建更加靈活和可擴充套件的應用程式。以下是關於 Nuxt 3 中的 Layouts 和 Modules 的詳細說明：

Layouts

Layouts 是一種在 Nuxt 中定義應用程式佈局的方式，它們可以讓你在不同頁面之間共享相同的佈局。在 Nuxt 3 中，你可以在 layouts 目錄中建立自定義的佈局。

以下是一個簡單的 Layouts 示例：

  1. 建立一個名為 layouts 的目錄，並在其中建立一個名為 default.vue 的檔案：

    layouts/
  - default.vue

  2. 在 default.vue 檔案中定義你的佈局：

    <template>
  <div>
    <header>
      <h1>我的應用程式</h1>
    </header>

    <main>
      <slot />
    </main>

    <footer>
      <p>© 2023 我的應用程式</p>
    </footer>
  </div>
</template>

  3. 在你的頁面中使用 Layouts：

    <template>
  <h2>我的頁面</h2>
  <p>這是我的頁面內容。</p>
</template>

    在這個示例中，我們在 layouts 目錄中建立了一個名為 default.vue 的佈局，並在其中定義了一個包含 header、main 和 footer 的結構。在頁面中，我們可以使用 <slot /> 插槽來顯示頁面的內容。

Modules

Modules 是一種在 Nuxt 中擴充套件應用程式功能的方式，它們可以讓你在整個應用程式中使用自定義的功能或第三方外掛。在 Nuxt 3 中，你可以使用 modules 目錄或 nuxt.config.ts 檔案來註冊本地或第三方模組。

以下是一個簡單的 Modules 示例：

  1. 建立一個名為 modules 的目錄，並在其中建立一個名為 example.ts 的檔案：

    modules/
  - example.ts

  2. 在 example.ts 檔案中定義你的模組：

    import { ModuleOptions } from '@nuxt/types'

export default function exampleModule(options: ModuleOptions) {
  this.nuxt.hook('render:route', (route) => {
    console.log(`渲染路由：${route.fullPath}`)
  })
}

    在這個示例中，我們建立了一個名為 exampleModule 的函式，它接收一個 ModuleOptions 型別的引數。在函式中，我們使用 this.nuxt.hook 鉤子函式來註冊一個名為 render:route 的鉤子，並在鉤子函式中記錄當前渲染的路由。

  3. 在 nuxt.config.ts 檔案中註冊你的模組：

    import { defineNuxtConfig } from 'nuxt'
import exampleModule from './modules/example'

export default defineNuxtConfig({
  modules: [
    exampleModule
  ]
})

    在這個示例中，我們在 nuxt.config.ts 檔案中使用 modules 陣列來註冊我們的 exampleModule 模組。

4.4 CSS模組化與 scoped CSS

CSS 模組化

CSS 模組化是一種將 CSS 檔案與 JavaScript 檔案耦合在一起的技術，它可以幫助你在構建應用程式時更好地管理和組織你的樣式表。在 Nuxt.js 3.4 中，你可以使用 <style module> 標籤來定義 CSS 模組。

以下是一個簡單的 CSS 模組化示例：

  1. 建立一個名為 components 的目錄，並在其中建立一個名為 MyComponent.vue 的檔案：

    components/
  - MyComponent.vue

  2. 在 MyComponent.vue 檔案中定義你的元件：

    <template>
  <div :class="$style.myComponent">
    <h2 :class="$style.title">我的元件標題</h2>
    <p :class="$style.content">我的元件內容。</p>
  </div>
</template>

<style module>
  .myComponent {
    border: 1px solid #ccc;
    padding: 16px;
  }

  .title {
    color: #333;
    font-size: 18px;
    margin-top: 0;
  }

  .content {
    color: #666;
    font-size: 14px;
    margin-bottom: 0;
  }
</style>

    在這個示例中，我們在 MyComponent.vue 檔案中使用 <style module> 標籤來定義我們的 CSS 模組。在 CSS 模組中，我們可以使用 $style 物件來引用我們的樣式類，並在元件的模板中使用這些類來應用樣式。

scoped CSS

scoped CSS 是一種將樣式限定在當前元件範圍內的技術，它可以幫助你避免樣式衝突和汙染。在 Nuxt.js 3.4 中，你可以使用 scoped 屬性來定義 scoped CSS。

以下是一個簡單的 scoped CSS 示例：

  1. 建立一個名為 components 的目錄，並在其中建立一個名為 MyComponent.vue 的檔案：

    components/
  - MyComponent.vue

  2. 在 MyComponent.vue 檔案中定義你的元件：

    <template>
  <div>
    <h2 class="title">我的元件標題</h2>
    <p class="content">我的元件內容。</p>
  </div>
</template>

<style scoped>
  .title {
    color: #333;
    font-size: 18px;
    margin-top: 0;
  }

  .content {
    color: #666;
    font-size: 14px;
    margin-bottom: 0;
  }
</style>

    在這個示例中，我們在 MyComponent.vue 檔案中使用 scoped 屬性來定義我們的 scoped CSS。在 scoped CSS 中，我們可以使用普通的 CSS 類來定義樣式，這些樣式將只應用於當前元件。

第五章：元件生命週期與最佳化

Nuxt 3 中的生命週期鉤子

Nuxt 3 是基於 Vue 3 的伺服器端渲染（SSR）框架，它提供了一套完整的生命週期鉤子，允許開發者在不同階段對元件進行操作。在 Nuxt 3 中，生命週期鉤子的使用與 Vue 3 相似，但由於其 SSR 的特性，有一些區別。以下是 Nuxt 3 中常用的生命週期鉤子：

setup

setup 是 Vue 3 Composition API 的入口，它是一個選項，作為元件的入口點，在元件建立之前執行。在 Nuxt 3 中，你可以在 setup 函式中定義元件的響應式資料和邏輯。

export default defineComponent({
  setup() {
    const count = ref(0);

    // 邏輯程式碼...

    return { count };
  }
});

伺服器端渲染相關鉤子

  • beforeRouteEnter: 在路由進入該元件的對應路由之前呼叫。
  • beforeRouteUpdate: 在當前路由改變，但是該元件被複用時呼叫。
  • beforeRouteLeave: 導航離開該元件的對應路由時呼叫。

客戶端渲染相關鉤子

以下是一些客戶端特有的生命週期鉤子：

  • onBeforeMount: 在元件掛載之前呼叫。
  • onMounted: 在元件掛載之後呼叫。
  • onBeforeUpdate: 在元件更新之前呼叫。
  • onUpdated: 在元件更新之後呼叫。
  • onBeforeUnmount: 在元件解除安裝之前呼叫。
  • onUnmounted: 在元件解除安裝之後呼叫。

created 和 beforeDestroy

在 Vue 2 中常用的 created 和 beforeDestroy 鉤子，在 Vue 3 中仍然可以使用，但在 Nuxt 3 中，你可能會更傾向於使用 Composition API 中的生命週期函式。以下是它們在 Nuxt 3 中的對應：

  • created: 可以使用 onBeforeMount 或 onMounted 代替，因為 Nuxt 3 是基於 Vue 3 的，created 鉤子在伺服器端也會被呼叫，但它不保證在客戶端執行。
  • beforeDestroy: 可以使用 onBeforeUnmount 代替。

以下是如何在 Nuxt 3 中使用 onBeforeUnmount 的示例：

export default defineComponent({
  setup() {
    onBeforeUnmount(() => {
      console.log('元件即將被解除安裝');
    });

    // 其他邏輯...
  }
});

在 Nuxt 3 中，由於它支援 Vue 3 的 Composition API，建議使用新的生命週期函式，它們提供了更細粒度的控制，並允許你在不同的生命週期階段更清晰地組織程式碼。

5.2 效能最佳化：懶載入、預渲染
Nuxt 3 提供了多種效能最佳化策略，包括懶載入（Lazy Loading）和預渲染（Prerendering）。以下是關於這兩個方面的簡要介紹：

1. 懶載入（Lazy Loading）

Nuxt 3 的懶載入功能允許你只載入使用者需要的部分內容，而不是一次性載入整個頁面。這主要透過使用 vue-lazyload 或 vue-meta 等庫，以及 Nuxt 的官方 nuxt-lazyload 外掛來實現。

  • vue-lazyload: 可以在單個元件或整個頁面上設定圖片、子元件等元素的懶載入。
  • vue-meta: 可以配置路由的 <meta> 標籤，控制路由的預載入和懶載入。
  • nuxt-lazyload: Nuxt 提供的官方外掛，可以全域性配置懶載入策略。

在 nuxt.config.js 中配置懶載入外掛：

export default {
  // ...
  plugins: [
    { src: '~/plugins/nuxt-lazyload', ssr: false }, // ssr: false 表示在客戶端執行懶載入
  ],
  // ...
}

2. 預渲染（Prerendering）

Nuxt 3 支援兩種預渲染方法：靜態預渲染（Static Rendering）和伺服器端渲染（Server-side Rendering，SSR）。

  • 靜態預渲染（Static Rendering） : 使用 nuxt generate 命令生成靜態 HTML 版本的頁面，這些頁面在伺服器上預先載入和解析，提高首屏載入速度。這對於 SEO 有顯著優勢，但不支援實時更新。
  • 伺服器端渲染（SSR） : 在使用者訪問頁面時，Nuxt 會先在伺服器上渲染整個頁面，然後將渲染結果返回給客戶端。這提供了更好的使用者體驗，尤其是對於動態內容，但伺服器資源消耗較大。

為了最佳化 SSR，可以考慮以下策略：

  • 使用 nuxt optimize 命令進行效能分析和最佳化。
  • 避免在 SSR 中執行復雜的計算或網路請求。
  • 使用 nuxt.config.js 中的 generate 和 build 配置，控制預渲染的範圍和時機。

5.3 程式碼複用與模組化策略

Nuxt 3 支援多種程式碼複用與模組化策略，以幫助開發人員提高程式碼的可重用性和可維護性。以下是一些常用的 Nuxt 3 模組化策略：

1. 共享元件（Shared Components）

在 Nuxt 3 中，可以將元件放在 components 目錄下，這些元件可以在整個應用中共享使用。例如，建立一個 components/MyButton.vue 檔案，其中包含一個自定義按鈕元件：

<template>
  <button @click="handleClick">
    {{ label }}
  </button>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      default: 'Button',
    },
  },
  methods: {
    handleClick() {
      this.$emit('click');
    },
  },
};
</script>

在其他元件中使用 MyButton 元件：

<template>
  <div>
    <MyButton label="Submit" @click="submitForm" />
  </div>
</template>

<script>
import MyButton from '~/components/MyButton.vue';

export default {
  components: {
    MyButton,
  },
  methods: {
    submitForm() {
      // ...
    },
  },
};
</script>

2. 外掛（Plugins）

Nuxt 3 支援使用外掛來擴充套件應用的功能。可以在 plugins 目錄下建立外掛檔案，例如 plugins/my-plugin.js：

export default function ({ app }) {
  app.mixin({
    methods: {
      $myMethod() {
        // ...
      },
    },
  });
}

在 nuxt.config.js 中配置外掛：

export default {
  // ...
  plugins: [
    '~/plugins/my-plugin',
  ],
  // ...
}

3. 模組（Modules）

Nuxt 3 支援使用模組來擴充套件應用的功能。可以在 modules 目錄下建立模組檔案，例如 modules/my-module.js：

export default function (moduleOptions) {
  this.nuxt.hook('components:dirs', (dirs) => {
    dirs.push('~/components/my-module');
  });

  this.nuxt.hook('build:before', () => {
    // ...
  });
}

在 nuxt.config.js 中配置模組：

export default {
  // ...
  modules: [
    '~/modules/my-module',
  ],
  // ...
}

4. 佈局（Layouts）

Nuxt 3 支援使用佈局來實現頁面的通用結構。可以在 layouts 目錄下建立佈局檔案，例如 layouts/default.vue：

<template>
  <div>
    <Header />
    <main>
      <slot />
    </main>
    <Footer />
  </div>
</template>

<script>
import Header from '~/components/Header.vue';
import Footer from '~/components/Footer.vue';

export default {
  components: {
    Header,
    Footer,
  },
};
</script>

在頁面元件中使用佈局：

<template>
  <Layout>
    <h1>My Page</h1>
  </Layout>
</template>

5. 儲存（Store）

Nuxt 3 支援使用 Vuex 實現應用的狀態管理。可以在 store 目錄下建立模組檔案，例如 store/index.js：

export const state = () => ({
  count: 0,
});

export const mutations = {
  increment(state) {
    state.count++;
  },
};

export const actions = {
  async incrementAsync({ commit }) {
    await new Promise((resolve) => setTimeout(resolve, 1000));
    commit('increment');
  },
};

export const getters = {
  doubleCount(state) {
    return state.count * 2;
  },
};

在頁面元件中使用儲存：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount']),
  },
  methods: {
    ...mapMutations(['increment']),
    ...mapActions(['incrementAsync']),
  },
};
</script>

第6章：元件測試與維護

6.1 使用 Vue Test Utils 進行單元測試

Vue Test Utils 是 Vue.js 官方提供的測試工具庫，用於編寫 Vue.js 元件的單元測試。在 Nuxt 3 中，可以使用 Vue Test Utils 來測試元件的行為和狀態。

首先，需要安裝 Vue Test Utils 和一些其他依賴庫：

npm install --save-dev @vue/test-utils vitest

然後，在專案根目錄下建立一個 tests 目錄，並在其中建立一個 unit 目錄，用於存放單元測試檔案。例如，測試 components/MyButton.vue 元件：

<template>
  <button :class="buttonClass" @click="handleClick">
    {{ label }}
  </button>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      default: 'Button',
    },
    type: {
      type: String,
      default: 'default',
    },
  },
  computed: {
    buttonClass() {
      return {
        'btn-primary': this.type === 'primary',
        'btn-secondary': this.type === 'secondary',
      };
    },
  },
  methods: {
    handleClick() {
      this.$emit('click');
    },
  },
};
</script>

建立一個 tests/unit/MyButton.spec.js 檔案，用於測試 MyButton 元件：

import { mount } from '@vue/test-utils';
import MyButton from '~/components/MyButton.vue';

describe('MyButton', () => {
  it('renders correctly', () => {
    const wrapper = mount(MyButton);
    expect(wrapper.element).toMatchSnapshot();
  });

  it('emits click event when clicked', async () => {
    const wrapper = mount(MyButton);
    await wrapper.trigger('click');
    expect(wrapper.emitted('click')).toBeTruthy();
  });

  it('applies primary class when type is primary', () => {
    const wrapper = mount(MyButton, {
      propsData: {
        type: 'primary',
      },
    });
    expect(wrapper.classes()).toContain('btn-primary');
  });

  it('applies secondary class when type is secondary', () => {
    const wrapper = mount(MyButton, {
      propsData: {
        type: 'secondary',
      },
    });
    expect(wrapper.classes()).toContain('btn-secondary');
  });
});

最後，在 package.json 中配置測試命令：

{
  "scripts": {
    "test": "vitest"
  }
}

執行測試命令：

npm test

6.2 使用 Storybook 進行元件開發與文件化

Storybook 是一個用於開發和文件化 UI 元件的工具。在 Nuxt 3 中，可以使用 Storybook 來開發和文件化元件。

首先，需要安裝 Storybook 和一些其他依賴庫：

npx sb init --builder @storybook/builder-webpack5 --typescript

然後，在專案根目錄下建立一個 .storybook 目錄，用於存放 Storybook 配置檔案。例如，建立一個 .storybook/main.js 檔案，用於配置 Storybook：

module.exports = {
  stories: ['../components/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
  framework: '@storybook/vue3',
  core: {
    builder: '@storybook/builder-webpack5',
  },
};

在 components 目錄下建立一個 MyButton.stories.ts 檔案，用於定義 MyButton 元件的 Story：

import MyButton from './MyButton.vue';

export default {
  title: 'Components/MyButton',
  component: MyButton,
};

const Template = (args) => ({
  components: { MyButton },
  setup() {
    return { args };
  },
  template: `
    <MyButton v-bind="args" />
  `,
});

export const Primary = Template.bind({});
Primary.args = {
  label: 'Primary',
  type: 'primary',
};

export const Secondary = Template.bind({});
Secondary.args = {
  label: 'Secondary',
  type: 'secondary',
};

最後，在 package.json 中配置 Storybook 命令：

{
  "scripts": {
    "storybook": "start-storybook -p 6006"
  }
}

執行 Storybook 命令：

npm run storybook

6.3 維護與更新最佳實踐

在 Nuxt 3 中開發和維護元件時，需要遵循一些最佳實踐，以保證元件的可重用性和可維護性。

  1. 使用元件庫：使用一些已有的元件庫，如 Vuetify、Bootstrap-Vue 等，可以減少開發和維護的工作量。
  2. 使用元件 props：使用元件 props 可以使元件更加靈活和可重用。
  3. 使用元件 slot：使用元件 slot 可以使元件更加靈活和可擴充套件。
  4. 使用元件事件：使用元件事件可以使元件更加互動和可響應。
  5. 使用元件樣式：使用元件樣式可以使元件更加美觀和一致。
  6. 使用元件測試：使用元件測試可以使元件更加可靠和可維護。
  7. 使用元件文件化：使用元件文件化可以使元件更加易於理解和使用。
  8. 使用元件更新：使用元件更新可以使元件更加新穎和有用。

往期文章推薦：

  • Nuxt.js 深入淺出：目錄結構與檔案組織詳解 | cmdragon's Blog
  • 友情連結 | cmdragon's Blog
  • 安裝 Nuxt.js 的步驟和注意事項 | cmdragon's Blog
  • 探索Web Components | cmdragon's Blog
  • Vue微前端架構與Qiankun實踐理論指南 | cmdragon's Blog
  • Vue 3深度探索：自定義渲染器與服務端渲染 | cmdragon's Blog
  • Tailwind CSS 響應式設計實戰指南 | cmdragon's Blog
  • Tailwind CSS 實戰指南：快速構建響應式網頁設計 | cmdragon's Blog
  • Vue 3與ESLint、Prettier：構建規範化的前端開發環境 | cmdragon's Blog
  • Vue TypeScript 實戰：掌握靜態型別程式設計 | cmdragon's Blog
  • Vue CLI 4與專案構建實戰指南 | cmdragon's Blog

相關文章