Nuxt.js 深入淺出：目錄結構與檔案組織詳解

Amd794發表於2024-06-18

title: Nuxt.js 深入淺出：目錄結構與檔案組織詳解
date: 2024/6/18
updated: 2024/6/18
author: cmdragon

excerpt:
摘要：本文詳述了Nuxt.js框架中關鍵目錄與配置檔案的作用及使用方法，包括佈局設定、頁面結構管理、外掛整合、靜態資源處理、 Vuex狀態管理、專案配置檔案nuxt.config.js詳解以及package.json、.eslintrc.js、.babelrc等輔助配置檔案的配置方式，為構建高效Nuxt應用提供了全面指南。

categories:

前端開發

tags:

Nuxt.js
前端框架
Vue.js
伺服器渲染
目錄結構
配置檔案
Web開發

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

Nuxt.js 簡介

1.1 什麼是 Nuxt.js

Nuxt.js 是一個基於 Vue.js 的輕量級應用框架，可用來建立服務端渲染 (SSR) 應用，也可充當靜態站點引擎生成靜態站點應用。它簡化了
Vue.js 專案的開發流程，提供了優雅的預設配置，使得開發者可以專注於業務邏輯的實現，而不必過多關注專案的配置和組織。

1.2 Nuxt.js 的特點

服務端渲染 (SSR)：Nuxt.js 支援服務端渲染，有助於提升搜尋引擎最佳化 (SEO) 和首屏載入速度。
自動程式碼分層：Nuxt.js 自動將程式碼分為檢視層、服務層和資料層，使得專案結構更加清晰。
強大的路由系統：Nuxt.js 內建了基於檔案的路由系統，透過在 pages 目錄下建立 Vue 檔案即可自動生成路由。
模組化：Nuxt.js 支援模組化，可以輕鬆整合第三方服務和外掛。
熱更新：開發過程中支援熱更新，提高開發效率。
靜態站點生成 (SSG)：Nuxt.js 可以生成靜態站點，適用於構建部落格、文件等靜態內容網站。
整合 Vuex：Nuxt.js 內建了 Vuex 狀態管理，方便管理應用的狀態。
豐富的外掛系統：透過 plugins 目錄，可以方便地引入和配置外掛。
預設配置：Nuxt.js 提供了許多預設配置，減少了專案的配置工作量。

1.3 Nuxt.js 的應用場景

企業官網：適合需要 SEO 的企業官網，透過服務端渲染提升搜尋引擎的收錄。
內容型網站：如新聞、部落格、文件等，靜態站點生成可以提供快速的訪問體驗。
電商網站：服務端渲染可以提升商品頁面的 SEO，同時提供流暢的使用者體驗。
管理後臺：雖然管理後臺通常不需要 SEO，但 Nuxt.js 的開發效率和良好的開發體驗也適合此類應用。
單頁應用 (SPA)：Nuxt.js 也可以作為 SPA 的開發框架，提供更好的開發體驗和效能最佳化。

Nuxt.js 的靈活性和強大的功能使其成為 Vue.js 生態中一個重要的框架，適用於多種型別的 Web 應用開發。

Nuxt.js 專案結構概述

2.1 專案結構圖解

Nuxt.js 專案的預設結構如下：

nuxt-project/
│
├── .nuxt/                  # 自動生成的目錄，包含執行時的 Nuxt.js 應用程式碼
├── assets/                 # 存放需要 Webpack 處理的靜態資源
│   ├── css/
│   ├── js/
│   └── images/
│
├── components/             # Vue 元件目錄，存放可複用的 Vue 元件
│   ├── MyButton.vue
│   └── Header.vue
│
├── layouts/                # 佈局元件目錄，定義應用的佈局結構
│   ├── default.vue
│   └── custom.vue
│
├── middleware/             # 中介軟體目錄，存放應用的中介軟體
│   ├── auth.js
│   └── locale.js
│
├── pages/                  # 頁面元件目錄，存放根據檔案結構自動生成路由的 Vue 元件
│   ├── index.vue
│   ├── about/
│   │   └── index.vue
│   └── user/
│       ├── _id.vue
│       └── index.vue
│
├── plugins/                # 外掛目錄，存放需要在應用啟動時載入的 JavaScript 外掛
│   ├── axios.js
│   └── vuetify.js
│
├── static/                 # 存放不需要 Webpack 處理的靜態資源
│   ├── favicon.ico
│   └── robots.txt
│
├── store/                  # Vuex 狀態管理目錄，存放應用的狀態管理程式碼
│   ├── index.js
│   └── modules/
│       ├── cart.js
│       └── user.js
│
├── nuxt.config.js          # Nuxt.js 配置檔案，用於配置應用的全域性行為
├── package.json            # 專案依賴和指令碼配置
└── README.md               # 專案說明文件

2.2 專案結構解析

.nuxt/ ：這個目錄是由 Nuxt.js 自動生成的，包含了執行時的 Nuxt.js 應用程式碼。在開發過程中，你不應該手動修改這個目錄下的檔案。
assets/ ：用於存放需要 Webpack 處理的靜態資源，如 CSS、JavaScript、圖片等。Webpack 會在構建過程中對這些資源進行編譯和最佳化。
components/ ：存放 Vue 元件，這些元件可以在頁面或其他元件中複用。
layouts/ ：定義應用的佈局結構。每個佈局對應一個 Vue 元件，可以在其中定義應用的整體佈局。
middleware/ ：存放應用的中介軟體。中介軟體可以在路由切換前執行，用於實現許可權驗證、日誌記錄等功能。
pages/ ：存放頁面元件。Nuxt.js 會根據這個目錄下的檔案結構自動生成路由。
plugins/ ：存放需要在應用啟動時載入的 JavaScript 外掛。這些外掛可以在nuxt.config.js中配置載入時機。
static/ ：存放不需要 Webpack 處理的靜態資源，如圖片、字型等。這些資源會被原樣複製到最終的構建目錄中。
store/ ：存放 Vuex 狀態管理程式碼。Nuxt.js 整合了 Vuex，可以方便地管理應用的狀態。
nuxt.config.js：Nuxt.js 的配置檔案，用於配置應用的全域性行為，如路由、外掛、模組等。
package.json：專案依賴和指令碼配置檔案，定義了專案所需的 npm 包和執行指令碼。
README.md：專案說明文件，通常包含專案的安裝、執行、開發等說明。

資源目錄（assets）

3.1 資源目錄（assets）的作用

資源目錄（assets）是 Nuxt.js 中用於存放需要 Webpack 處理的靜態資源的目錄。這些資源可以是 CSS、JavaScript、圖片、字型等。在構建時，Webpack
會將這些資源編譯成可用於生產環境的靜態檔案。

3.2 資源目錄下的檔案型別

在資源目錄下，你可以存放以下型別的檔案：

CSS：可以在assets/css目錄下存放 CSS 檔案。
JavaScript：可以在assets/js目錄下存放 JavaScript 檔案。
圖片：可以在assets/images目錄下存放圖片檔案。
字型：可以在assets/fonts目錄下存放字型檔案。

3.3 資源目錄的使用方法

使用資源目錄下的檔案，你可以按照以下步驟操作：

在assets目錄下建立一個資料夾，例如css、js、images或fonts。
在資料夾中建立一個檔案，例如styles.css、main.js、logo.png或icon.ttf。
在你的頁面或元件中，使用import或require語句引入檔案。

例如，在pages/index.vue中引入assets/css/styles.css：

<template>
  <div>
    <h1>Hello World!</h1>
  </div>
</template>

<style>
/* 引入 assets/css/styles.css */
@import '~/assets/css/styles.css';
</style>

<script>
export default {
  // 引入 assets/js/main.js
  import main from '~/assets/js/main.js';

  // 在元件中使用引入的 JavaScript 模組
  mounted() {
    main();
  }
}
</script>

在上面的示例中，我們使用@import語句引入styles.css檔案，並在<style>標籤中使用。同時，我們使用import語句引入main.js
檔案，並在mounted鉤子函式中呼叫它。

注意，在 Nuxt.js 中，你可以使用~或@作為路徑別名，指向專案根目錄。因此，在上面的示例中，我們使用~/assets/css/styles.css
和~/assets/js/main.js作為路徑。

元件目錄（components）

4.1 元件目錄（components）的作用

元件目錄（components）是 Nuxt.js 中用於存放 Vue.js 元件的目錄。在這個目錄下，你可以存放各種複用的 UI 元素或功能模組，例如按鈕、表單、卡片、列表等。

4.2 元件目錄下的檔案型別

在元件目錄下，你可以存放以下型別的檔案：

Vue.js 單檔案元件（SFC）：可以在components目錄下直接建立一個檔案，並使用.vue副檔名。

例如，在components目錄下建立一個Button.vue檔案：

<template>
  <button>
    {{ label }}
  </button>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      default: 'Button'
    }
  }
}
</script>

<style>
button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #42b983;
  color: #fff;
  cursor: pointer;
}
</style>

在上面的示例中，我們建立了一個Button元件，並使用props屬性接收label屬性。

4.3 元件目錄的使用方法

使用元件目錄下的檔案，你可以按照以下步驟操作：

在components目錄下建立一個檔案，例如Button.vue。
在你的頁面或其他元件中，使用components選項引入元件。

例如，在pages/index.vue中引入components/Button.vue：

<template>
  <div>
    <h1>Hello World!</h1>
    <Button label="Click me" />
  </div>
</template>

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

export default {
  components: {
    Button
  }
}
</script>

在上面的示例中，我們使用import語句引入Button.vue檔案，並在components選項中註冊元件。

在你的頁面或其他元件中，使用元件標籤渲染元件。

例如，在pages/index.vue中渲染Button元件：

<template>
  <div>
    <h1>Hello World!</h1>
    <Button label="Click me" />
  </div>
</template>

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

export default {
  components: {
    Button
  }
}
</script>

在上面的示例中，我們在<div>標籤中使用<Button>標籤渲染Button元件。

注意，在 Nuxt.js 中，你可以使用~或@作為路徑別名，指向專案根目錄。因此，在上面的示例中，我們使用~/components/Button.vue
作為路徑。

佈局目錄（layouts）

5.1 佈局目錄（layouts）的作用

佈局目錄（layouts）在 Nuxt.js 中主要用於管理頁面的結構和共享部分，如頁首、頁尾、導航欄等。這些佈局檔案定義了頁面的通用佈局，可以被多個頁面引用，以確保在整個應用中保持一致的樣式和結構。
AD：等你探索

5.2 佈局目錄下的檔案型別

佈局目錄通常包含以下型別的檔案：

default.vue或layout.vue：這是最基礎的佈局檔案，所有沒有指定特定佈局的頁面都會使用這個佈局。它通常包含一個或多個slot
（插槽），用於放置內容區域。

<template>
  <div>
    <header>
      <!-- 頁首內容 -->
    </header>
    <main>
      <slot name="default">這是預設內容區域</slot>
    </main>
    <footer>
      <!-- 頁尾內容 -->
    </footer>
  </div>
</template>

page.vue或layout-page.vue：如果需要為特定型別的頁面（如文章、產品頁面）定義特定的佈局，可以建立一個獨立的佈局檔案。

5.3 佈局目錄的使用方法

使用佈局目錄的步驟如下：

在layouts目錄下建立一個佈局檔案，例如default.vue或layout.vue。
在default.vue檔案中定義頁面的通用結構，如頭部、主體和頁尾。
在需要使用佈局的頁面或元件中，使用layout屬性指定佈局。例如，pages/index.vue：

<template>
  <layout>
    <div slot="default">
      <h1>這是頁面內容</h1>
    </div>
  </layout>
</template>

<script>
import Layout from '~/layouts/default.vue';

export default {
  layout: Layout,
  data() {
    return {
      title: '首頁'
    }
  }
}
</script>

在上面的示例中，pages/index.vue使用了default.vue佈局，並在default插槽中放置了頁面內容。

如果需要為特定頁面使用不同的佈局，可以在該頁面的元件中指定layout屬性，如pages/blog/post.vue：

<template>
  <layout-page>
    <h1>部落格文章標題</h1>
    <p>文章內容...</p>
  </layout-page>
</template>

<script>
import LayoutPage from '~/layouts/layout-page.vue';

export default {
  layout: LayoutPage,
  data() {
    return {
      title: '部落格文章'
    }
  }
}
</script>

這樣，pages/blog/post.vue就會使用layout-page.vue
佈局，而其他頁面則使用預設佈局。SHA線上加密 | 一個覆蓋廣泛主題工具的高效線上平臺 (cmdragon.cn)

頁面目錄（pages）

6.1 頁面目錄（pages）的作用

頁面目錄（pages）在 Nuxt.js 中用於存放應用程式的各個頁面，頁面檔案在 Nuxt.js 中有特殊的含義，它們會根據檔案路徑和檔名自動生成對應的路由規則。

6.2 頁面目錄下的檔案型別

頁面目錄下可以包含以下型別的檔案：

.vue檔案：用於定義頁面的結構、樣式和行為。
.js檔案：用於定義頁面的資料和方法。如果頁面需要使用 JavaScript 模組，可以在頁面目錄下建立一個.js檔案，並在.vue
檔案中匯入該模組。
.json檔案：用於定義頁面的資料，可以在.vue檔案中使用import語句匯入該檔案。
.md或.mdown檔案：如果使用了markdown外掛，可以在頁面目錄下建立一個.md或.mdown檔案，用於定義頁面的內容。

6.3 頁面目錄的使用方法

使用頁面目錄的步驟如下：

在pages目錄下建立一個頁面檔案，例如index.vue。
在index.vue檔案中定義頁面的結構、樣式和行為。例如：

<template>
  <div>
    <h1>這是首頁</h1>
    <p>歡迎來到我的個人網站！</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '首頁'
    }
  }
}
</script>

根據頁面檔案的路徑和檔名，Nuxt.js 會自動生成對應的路由規則。例如，pages/index.vue
對應的路由規則為/，pages/blog/index.vue對應的路由規則為/blog，pages/blog/_id.vue對應的路由規則為/blog/:id。
如果需要在頁面中使用資料，可以在data函式中定義資料，並在模板中使用。例如：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '文章標題',
      content: '文章內容...'
    }
  }
}
</script>

如果需要在頁面中使用 JavaScript 模組，可以在頁面目錄下建立一個.js檔案，並在.vue
檔案中匯入該模組。例如：正則視覺化 | 一個覆蓋廣泛主題工具的高效線上平臺 (cmdragon.cn)

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
    <button @click="showMessage">顯示訊息</button>
  </div>
</template>

<script>
import { showMessage } from '~/utils/message.js';

export default {
  data() {
    return {
      title: '文章標題',
      content: '文章內容...'
    }
  },
  methods: {
    showMessage() {
      showMessage('這是一個訊息！');
    }
  }
}
</script>

在上面的示例中，utils/message.js檔案中定義了一個showMessage函式，在頁面中使用import語句匯入該函式，並在模板中使用。

外掛目錄（plugins）

7.1 外掛目錄的作用

在 Nuxt.js 中，plugins目錄用於存放需要在應用程式初始化之前或執行時載入的 JavaScript 外掛。這些外掛可以是第三方庫，也可以是自定義的模組，用於增強
Nuxt.js 應用的功能，例如新增全域性元件、注入 Vue 例項方法、處理全域性狀態管理等。

7.2 外掛目錄下的檔案型別

JavaScript 檔案：.js檔案，通常用於匯入第三方庫或編寫自定義邏輯。
Vue 檔案：.vue檔案，可以用於定義全域性 Vue 元件。
TypeScript 檔案：.ts檔案，如果專案使用 TypeScript，可以編寫 TypeScript 外掛。

7.3 外掛目錄的使用方法

配置外掛

在plugins目錄下建立外掛檔案，例如myPlugin.js。
在nuxt.config.js中配置外掛路徑：

export default {
  // ...
  plugins: [
    '~/plugins/myPlugin.js',
    // 其他外掛路徑
  ],
  // ...
}

編寫外掛

外掛檔案可以匯出一個函式，該函式接收Vue建構函式作為引數，並可以修改Vue例項：

// plugins/myPlugin.js
export default ({ app }, inject) => {
  // 注入到 Vue 例項中的方法
  inject('myMethod', (value) => {
    console.log('My Plugin:', value);
  });
};

使用外掛

在 Vue 元件中，可以透過$myMethod訪問外掛中注入的方法：

<template>
  <div>
    <button @click="$myMethod('Hello, Nuxt.js!')">Click me</button>
  </div>
</template>

注意事項

外掛應該在plugins陣列中按照它們應該被載入的順序列出。
外掛可以包含非同步操作，但應該確保在應用初始化之前完成。
外掛可以訪問 Nuxt.js 提供的上下文物件，包括app、store、route、params等。

靜態檔案目錄（static）

8.1 靜態檔案目錄的作用

靜態檔案目錄在 Nuxt.js 中用於存放不經過伺服器處理的檔案，如圖片、CSS、JavaScript
檔案、字型檔案、PDF、影片等。這些檔案在使用者請求時直接從客戶端（瀏覽器）載入，提高了使用者體驗，因為它們不需要伺服器處理。線上錄屏 | 一個覆蓋廣泛主題工具的高效線上平臺 (cmdragon.cn)

8.2 靜態檔案目錄下的檔案型別

HTML：.html檔案，用於呈現靜態網頁內容。
CSS：.css檔案，用於定義樣式。
JavaScript：.js檔案，用於提供前端互動或庫。
圖片：.jpg,.png,.gif等，用於頁面中的視覺元素。
字型：.ttf,.woff,.woff2等，用於自定義字型。
多媒體檔案：.mp4,.avi,.pdf等，直接下載或在頁面中嵌入。
其他：如圖示、圖示集、資料檔案等。

8.3 靜態檔案目錄的使用方法

配置靜態檔案

在 Nuxt.js 專案中建立一個名為static的資料夾，通常位於專案根目錄。
將需要的靜態檔案放入這個資料夾中。

訪問靜態檔案

在模板（.vue檔案）中，直接使用相對路徑引用：

<img src="/static/my-image.jpg" alt="My Image">

如果在路由中，可以直接使用this.$app.url獲取完整的 URL：

export default {
  async asyncData({ app }) {
    return {
      image: app.url('/static/my-image.jpg'),
    };
  },
};

注意事項

靜態檔案不會經過 Nuxt.js 的中介軟體處理，它們直接從伺服器傳送給客戶端。
如果需要對靜態檔案進行某種處理（如壓縮、轉換），可以在構建時使用 Nuxt.js 的構建工具。
使用public目錄也可以存放靜態檔案，但通常static用於存放更廣泛的檔案型別，而public更適合存放不直接需要伺服器處理的資源。

透過以上方法，Nuxt.js 的靜態檔案目錄可以方便地管理和提供網站的靜態資源。

Store 目錄（store）

9.1 Store 目錄的作用

在 Vue.js 和 Nuxt.js 中，store目錄用於存放 Vuex 狀態管理庫的程式碼。Vuex 是一個專為 Vue.js
應用程式開發的狀態管理模式和庫。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

9.2 Store 目錄下的檔案型別

模組檔案：通常以.js或.ts為字尾，用於定義 Vuex 的模組，每個模組可以包含state,mutations,actions,getters等部分。
主 store 檔案：通常命名為index.js或store.js，用於引入各個模組，並建立 Vuex store 例項。

9.3 Store 目錄的使用方法

建立 Store

在 Nuxt.js 專案中，建立一個名為store的目錄。
在store目錄下建立index.js檔案，這是 Vuex store 的入口檔案。

// store/index.js
export const state = () => ({
  // 定義狀態
});

export const mutations = {
  // 定義 mutations
};

export const actions = {
  // 定義 actions
};

export const getters = {
  // 定義 getters
};

如果需要模組化，可以在store目錄下建立多個模組檔案，並在index.js中引入它們。

// store/index.js
import user from './user';

export const modules = {
  user,
};

export const state = () => ({
  // 定義全域性狀態
});

export const mutations = {
  // 定義全域性 mutations
};

export const actions = {
  // 定義全域性 actions
};

export const getters = {
  // 定義全域性 getters
};

在元件中使用 Store

使用mapState,mapMutations,mapActions,mapGetters輔助函式在元件中訪問 store 的狀態、mutations、actions 和 getters。

import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['user']),
  },
  methods: {
    ...mapActions(['fetchUser']),
  },
};

直接在元件中使用this.$store訪問 store 例項。

export default {
  async asyncData({ store }) {
    await store.dispatch('fetchUser');
  },
};

注意事項

Vuex store 應該在 Nuxt.js 應用的根例項中建立，通常在nuxt.config.js或plugins目錄中。
使用 Vuex 可以幫助管理複雜應用的狀態，但不是所有應用都需要它。對於簡單的應用，使用元件的data屬性可能就足夠了。
Vuex 的狀態是響應式的，因此任何狀態的變化都會自動更新到檢視。

nuxt.config.js 檔案

10.1 nuxt.config.js 檔案的作用

nuxt.config.js檔案是 Nuxt.js 專案的主配置檔案，用於配置 Nuxt.js 應用程式的行為和特性。在這個檔案中，你可以定義應用程式的各種選項，例如：

頁面、路由、元件和外掛的配置
全域性 CSS 和 JavaScript 的載入
本地化、環境變數和構建設定
伺服器、渲染和部署選項

10.2 nuxt.config.js 檔案的基本配置

下面是一些常用的基本配置：

buildModules：用於配置第三方模組，例如eslint和prettier。
buildDir：用於配置構建輸出目錄。
build：用於配置構建選項，例如transpile和extend。
css：用於配置載入全域性 CSS 檔案。
plugins：用於配置載入全域性外掛。
components：用於配置全域性註冊元件。
router：用於配置路由選項。
server：用於配置伺服器選項。

示例：

// nuxt.config.js
export default {
  buildModules: ['@nuxtjs/eslint-module'],
  buildDir: '.nuxt',
  build: {
    transpile: [/regexp/],
    extend(config, { isDev, isClient }) {
      // ...
    },
  },
  css: ['~/assets/css/main.css'],
  plugins: ['~/plugins/my-plugin.js'],
  components: true,
  router: {
    middleware: ['auth'],
  },
  server: {
    port: 3000,
    host: '0.0.0.0',
  },
};

10.3 nuxt.config.js 檔案的進階配置

下面是一些常用的進階配置：

modules：用於配置第三方模組，例如nuxt-i18n和nuxt-meta。
serverMiddleware：用於配置伺服器中介軟體。
generate：用於配置靜態站點生成選項。
env：用於配置環境變數。
head：用於配置頁面的 head 標籤。
target：用於配置應用程式的部署目標。

示例：

// nuxt.config.js
export default {
  modules: ['@nuxtjs/i18n', '@nuxtjs/axios'],
  serverMiddleware: ['~/api/index.js'],
  generate: {
    routes: ['/about', '/contact'],
  },
  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000',
  },
  head: {
    title: 'My App',
    meta: [
      {
        hid: 'description',
        name: 'description',
        content: 'My App description',
      },
    ],
  },
  target: 'server',
};

package.json 檔案

11.1 package.json 檔案的作用

package.json檔案是 Node.js
專案的核心配置檔案，用於定義專案的各種後設資料和依賴關係。這個檔案包含了專案的名稱、版本、描述、作者、許可證、指令碼命令、依賴項、開發依賴項等資訊。它使得專案的管理和共享變得更加容易，同時也方便了自動化工具（如
npm 和 yarn）的使用。

11.2 package.json 檔案的基本配置

下面是一些常用的基本配置：

name：專案的名稱。
version：專案的版本號。
description：專案的描述。
main：專案的入口檔案。
scripts：定義了一系列可執行的指令碼命令。
dependencies：專案的生產環境依賴。
devDependencies：專案的開發環境依賴。
author：專案的作者。
license：專案的許可證。

示例：

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "My awesome project",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "jest"
  },
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "jest": "^26.6.3"
  },
  "author": "John Doe",
  "license": "MIT"
}

11.3 package.json 檔案的進階配置

下面是一些常用的進階配置：

keywords：專案的關鍵詞，有助於在 npm 上搜尋。
repository：專案的程式碼倉庫地址。
bugs：專案的 bug 跟蹤地址。
homepage：專案的主頁地址。
engines：指定專案執行的 Node.js 版本。
private：如果設定為true，則防止專案被髮布到 npm。
files：指定釋出到 npm 時包含的檔案或目錄。
bin：用於指定可執行檔案的入口。

示例：

{
  "keywords": ["example", "express", "node"],
  "repository": {
    "type": "git",
    "url": "https://github.com/user/repo.git"
  },
  "bugs": {
    "url": "https://github.com/user/repo/issues"
  },
  "homepage": "https://my-project.com",
  "engines": {
    "node": ">=12.0.0"
  },
  "private": true,
  "files": ["dist", "README.md"],
  "bin": {
    "my-cli": "bin/my-cli.js"
  }
}

透過以上方法，你可以在package.json檔案中進行專案的詳細配置，以滿足不同的開發和部署需求。
RIPEMD線上加密 | 一個覆蓋廣泛主題工具的高效線上平臺 (cmdragon.cn)

其他配置檔案

12.1 .eslintrc.js 檔案

.eslintrc.js檔案是 ESLint 的配置檔案，用於定義程式碼風格和規則。ESLint 是一個用於識別和報告 JavaScript
程式碼中的模式匹配的工具，它可以幫助你發現程式碼中的錯誤和潛在的問題。

基本配置：

module.exports = {
  // 解析器選項
  parserOptions: {
    ecmaVersion: 2018, // ECMAScript 版本
    sourceType: 'module', // 指定原始碼型別
    ecmaFeatures: {
      jsx: true // 啟用 JSX
    }
  },
  // 擴充套件配置檔案
  extends: [
    'eslint:recommended',
    'plugin:react/recommended'
  ],
  // 解析器外掛
  plugins: [
    'react'
  ],
  // 規則配置
  rules: {
    'semi': ['error', 'always'], // 強制使用分號
    'quotes': ['error', 'single'], // 強制使用單引號
    'react/jsx-uses-vars': 'error' // 防止在 JSX 中未使用的變數
  },
  // 環境配置
  env: {
    browser: true,
    node: true,
    es6: true
  },
  // 全域性變數
  globals: {
    'window': true,
    'document': true
  }
};

12.2 .babelrc 檔案

.babelrc檔案是 Babel 的配置檔案，用於定義如何將 ES6+ 程式碼轉換為向後相容的 JavaScript 程式碼。Babel 是一個廣泛使用的
JavaScript 編譯器，它可以將 ES6+ 程式碼轉換為 ES5 程式碼，以便在舊版瀏覽器中執行。

基本配置：

{
  "presets": [
    "@babel/preset-env", // 根據目標環境自動啟用所需的外掛
    "@babel/preset-react" // 轉換 JSX 語法
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties", // 轉換類屬性
    "@babel/plugin-proposal-object-rest-spread" // 轉換物件擴充套件運算子
  ]
}

透過以上配置，你可以根據專案的需求調整 ESLint 和 Babel 的配置，以確保程式碼質量和相容性。

專案配置詳解

在一個Nuxt.js專案中，這些配置項有以下含義：

build配置：
- 在nuxt.config.js中，可以使用build物件配置構建選項。例如：

export default {
  build: {
    extend(config, { isDev, isClient }) {
      // 修改webpack配置
    }
  }
}

css配置：
- 在nuxt.config.js中，可以使用css陣列配置CSS前處理器或載入全域性CSS樣式。例如：

export default {
  css: ['~/assets/css/main.css']
}

dev配置：
- 在nuxt.config.js中，可以使用dev物件配置開發環境選項。例如：

export default {
  dev: {
    openHandler: (/* { error, app, message, port } */) => {
      // 自定義開發伺服器啟動後的行為
    }
  }
}

env配置：
- 在nuxt.config.js中，可以使用env物件配置環境變數。例如：

export default {
  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
  }
}

generate配置：
- 在nuxt.config.js中，可以使用generate物件配置生成靜態站點的選項。例如：

export default {
  generate: {
    routes: ['/about', '/contact']
  }
}

head配置：
- 在nuxt.config.js中，可以使用head物件配置頁面頭部元素。例如：

export default {
  head: {
    title: 'My App',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  }
}

loading配置：
- 在nuxt.config.js中，可以使用loading物件配置載入動畫。例如：

export default {
  loading: {
    color: '#3B8070',
    height: '3px'
  }
}

modules配置：
- 在nuxt.config.js中，可以使用modules陣列配置Nuxt.js外掛。例如：

export default {
  modules: ['@nuxtjs/axios']
}

modulesDir配置：
- 在nuxt.config.js中，可以使用modulesDir字串配置外掛目錄。例如：

export default {
  modulesDir: '@/modules'
}

plugins配置：
- 在nuxt.config.js中，可以使用plugins陣列配置應用級別的Vue.js外掛。例如：

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

rootDir配置：
- 在nuxt.config.js中，可以使用rootDir字串配置專案根目錄。例如：

export default {
  rootDir: './src/'
}

router配置：
- 在nuxt.config.js中，可以使用router物件配置路由器選項。例如：

export default {
  router: {
    middleware: 'auth'
  }
}

server配置：
- 在nuxt.config.js中，可以使用server物件配置伺服器選項。例如：

export default {
  server: {
    port: 3000,
    host: '0.0.0.0'
  }
}

srcDir配置：
- 在nuxt.config.js中，可以使用srcDir字串配置原始碼目錄。例如：

export default {
  srcDir: 'src/'
}

dir配置：
- 在nuxt.config.js中，可以使用dir物件配置目錄結構。例如：

export default {
  dir: {
    public: 'static',
    pages: 'pages'
  }
}

transition配置：
- 在nuxt.config.js中，可以使用transition物件配置頁面過渡動畫。例如：

export default {
  transition: {
    name: 'page',
    mode: 'out-in'
  }
}

每個配置項的具體內容可以參考Nuxt.js配置文件。

Nginx目錄結構與配置檔案詳解
2019-12-12
Nginx
伺服器與目錄結構深入瞭解
2024-09-01
伺服器
位元組碼檔案結構詳解
2020-08-14
Linux檔案系統目錄結構
2018-03-19
Linux
比起 Windows，怎樣解讀 Linux 的檔案系統與目錄結構？
2018-06-09
WindowsLinux
8.var目錄下的檔案和目錄詳解
2020-04-04
MachO 檔案結構詳解
2019-02-21
Mac
Linux 檔案與目錄
2019-07-29
Linux
vue-cli 目錄結構詳細講解
2019-02-16
Vue
Unity3D專案Plugins目錄組織
2019-11-08
Unity3DPlugin
深入淺出Dotnet Core的專案結構變化
2021-01-13
linux檔案系統的目錄結構筆記
2020-11-26
Linux筆記
DedeCMS模板目錄的檔案目錄結構
2024-07-14
文件管理 | 文件目錄結構和檔案情況的檢視與匯出
2024-10-17
Helm目錄結構講解
2020-12-21
前端專案檔案組織與元件命名
2019-04-01
前端元件
【深入淺出ES6】解構
2019-03-04
Macbook磁碟系統結構/檔案/目錄介紹分析
2023-12-05
Mac
深入淺出 Runtime（二）：資料結構
2020-02-25
資料結構
Linux 目錄結構及詳細操作
2021-12-13
Linux
MVCC詳解，深入淺出簡單易懂
2024-09-01
MVC
linux檔案與目錄管理命令
2018-08-27
Linux
Linux檔案與目錄管理(2)
2020-11-26
Linux
[20180707]刪除結尾帶.的檔案與目錄.txt
2018-07-07
深入淺出Nginx實戰與架構
2022-05-29
Nginx架構
Linux 學習筆記--目錄結構及檔案基本操作
2020-04-06
Linux筆記
jmeter基礎之目錄結構解析及配置檔案修改
2020-12-08
JMeter
深入淺出的webpack構建工具---babel之配置檔案.babelrc(三)
2018-08-09
WebBabel
rust 模組組織結構
2020-08-31
Rust
深入淺出的webpack構建工具---devTool中SourceMap模式詳解(四)
2018-08-12
Webdev模式
Transpile Webpack Plugin：讓 Webpack 按照原始檔的目錄結構輸出
2022-12-28
WebPlugin
[轉] 淺析x86架構中cache的組織結構
2021-09-09
架構
Android Studio目錄結構及工程專案結構解析
2018-12-11
Android
【PG體系結構】Postgresql 配置檔案詳解
2019-01-07
SQL
11_Linux目錄結構講解
2024-03-10
Linux
目標檔案和ELF格式詳解
2019-04-04
深入解析Class類檔案的結構
2019-03-24
fabric 目錄結構
2018-08-20

Nuxt.js 深入淺出：目錄結構與檔案組織詳解

Nuxt.js 簡介

1.1 什麼是 Nuxt.js

1.2 Nuxt.js 的特點

1.3 Nuxt.js 的應用場景

Nuxt.js 專案結構概述

2.1 專案結構圖解

2.2 專案結構解析

資源目錄（assets）

3.1 資源目錄（assets）的作用

3.2 資源目錄下的檔案型別

3.3 資源目錄的使用方法

元件目錄（components）

4.1 元件目錄（components）的作用

4.2 元件目錄下的檔案型別

4.3 元件目錄的使用方法

佈局目錄（layouts）

5.1 佈局目錄（layouts）的作用

5.2 佈局目錄下的檔案型別

5.3 佈局目錄的使用方法

頁面目錄（pages）

6.1 頁面目錄（pages）的作用

6.2 頁面目錄下的檔案型別

6.3 頁面目錄的使用方法

外掛目錄（plugins）

7.1 外掛目錄的作用

7.2 外掛目錄下的檔案型別

7.3 外掛目錄的使用方法

靜態檔案目錄（static）

8.1 靜態檔案目錄的作用

8.2 靜態檔案目錄下的檔案型別

8.3 靜態檔案目錄的使用方法

Store 目錄（store）

9.1 Store 目錄的作用

9.2 Store 目錄下的檔案型別

9.3 Store 目錄的使用方法

nuxt.config.js 檔案

10.1 nuxt.config.js 檔案的作用

10.2 nuxt.config.js 檔案的基本配置

10.3 nuxt.config.js 檔案的進階配置

package.json 檔案

11.1 package.json 檔案的作用

11.2 package.json 檔案的基本配置

11.3 package.json 檔案的進階配置

其他配置檔案

12.1 .eslintrc.js 檔案

12.2 .babelrc 檔案

專案配置詳解

相關文章