jizzyou中国少妇,被强到爽的邻居人妻完整版

首頁

web前端

js教程

Nuxt.js 實際應用：Vue.js 服務器端渲染框架

Mary-Kate Olsen

Dec 31, 2024 am 06:35 AM

Nuxt.js in action: Vue.js server-side rendering framework

創(chuàng)建 Nuxt.js 項目

首先，確保您已經(jīng)安裝了 Node.js 和 YARN 或 NPM。然后，通過命令行創(chuàng)建一個新的 Nuxt.js 項目：

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

在創(chuàng)建過程中，您可以選擇是否需要UI框架、預處理器等選項，并根據(jù)需要進行配置。

目錄結(jié)構(gòu)

Nuxt.js遵循特定的目錄結(jié)構(gòu)，部分關(guān)鍵目錄如下：

├── .nuxt/ # Automatically generated files, including compiled code and configuration
├── assets/ # Used to store uncompiled static resources, such as CSS, images, fonts
├── components/ # Custom Vue components
├── layouts/ # Application layout files, defining the general structure of the page
│ └── default.vue # Default layout
├── middleware/ # Middleware files
├── pages/ # Application routes and views, each file corresponds to a route
│ ├── index.vue # Default homepage
│ └── [slug].vue # Dynamic routing example
├── plugins/ # Custom Vue.js plugins
├── static/ # Static resources, will be copied to the output directory as is
├── store/ # Vuex state management file
│ ├── actions.js # Vuex actions
│ ├── mutations.js # Vuex mutations
│ ├── getters.js # Vuex getters
│ └── index.js # Vuex store entry file
├── nuxt.config.js # Nuxt.js configuration file
├── package.json # Project dependencies and scripts
└── yarn.lock # Or npm.lock, record dependency versions

.nu??xt/：該目錄是自動生成的，包含編譯后的代碼。一般不需要直接修改。
asset/：存放未編譯的靜態(tài)資源，如CSS、JavaScript、圖片等。 Nuxt.js 將在構(gòu)建期間處理這些資源。
Components/：存儲可以在應用程序的不同部分重用的自定義 Vue 組件。
layouts/：定義頁面的布局?？梢杂幸粋€默認布局或多個特定布局。
page/：每個文件對應一個路由，文件名就是路由名。動態(tài)路由用方括號[]表示。
middleware/: 放置自定義中間件，可以在頁面渲染前后執(zhí)行邏輯。
plugins/: Vue.js 插件的自定義入口文件。
static/：不做任何處理，直接復制到構(gòu)建輸出目錄，常用于存放robots.txt或favicon.ico等
store/：Vuex 狀態(tài)管理目錄，存儲 actions、mutations、getters 以及整個 store 的入口文件。
nuxt.config.js：Nuxt.js配置文件，用于自定義項目設(shè)置。
package.json：項目依賴和腳本配置。
yarn.lock 或 npm.lock：記錄項目依賴的準確版本，以保證不同環(huán)境下依賴的一致性。

頁面渲染

在pages/目錄下創(chuàng)建一個index.vue文件。這是應用程序的主頁：

<!-- pages/index.vue -->
<template>
  <div>
    <h1>Hello from Nuxt.js SSR</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'This content is server-rendered!'
    };
  },
  asyncData() {
    // Here you can get data on the server side
    // The returned data will be used as the default value of data
    return { message: 'Data fetched on server' };
  }
};
</script>

Nuxt.js頁面渲染的過程分為兩個主要階段：服務器端渲染（SSR）和客戶端渲染（CSR）。以下是Nuxt.js頁面渲染的詳細步驟：

初始化：

用戶在瀏覽器中輸入URL并向服務器發(fā)送請求。

服務器收到請求后，開始處理。

路線分辨率：

Nuxt.js 使用 nuxt.config.js 中的路由配置（如果存在）或自動從pages/目錄生成路由。

識別對應的頁面文件，如pages/index.vue或pages/about.vue。

數(shù)據(jù)預取：

Nuxt.js 在頁面組件中查找 asyncData 或 fetch 方法（如果存在）。

這些方法將在服務器端運行，以從 API 或其他數(shù)據(jù)源獲取數(shù)據(jù)。

獲取到數(shù)據(jù)后，會序列化并注入到頁面模板中

模板渲染：

Nuxt.js 使用 Vue.js 的渲染引擎將組件和預取的數(shù)據(jù)轉(zhuǎn)換為 HTML 字符串。
HTML 字符串包含客戶端所需的所有初始數(shù)據(jù)，內(nèi)聯(lián)在 <script> 中。 JSON 格式的標簽。</script>

返回 HTML：

服務器將生成的 HTML 響應發(fā)送回客戶端（瀏覽器）。

客戶端初始化：

瀏覽器收到 HTML 后，開始解析并執(zhí)行內(nèi)聯(lián) JavaScript。
Nuxt.js 客戶端庫 (nuxt.js) 已加載并初始化。

客戶端渲染：

客戶端庫接管渲染，創(chuàng)建 Vue.js 實例，并將數(shù)據(jù)從內(nèi)聯(lián) JSON 注入到 Vue 實例中。
頁面完成初始渲染，用戶可以看到完整的頁面內(nèi)容。
此時，頁面是交互式的，用戶可以觸發(fā)事件并進行導航。

后續(xù)導航：

當用戶導航到其他頁面時，Nuxt.js 使用客戶端路由（Vue Router）進行無刷新跳轉(zhuǎn)。
如果新頁面需要數(shù)據(jù)，則 asyncData 或 fetch 方法將在客戶端運行，獲取新數(shù)據(jù)并更新視圖。

SSG（靜態(tài)站點生成）：

在開發(fā)之外，您可以使用 nuxtgenerate 命令生成靜態(tài) HTML 文件。

每個頁面都將預渲染為一個單獨的 HTML 文件，其中包含所有必要的數(shù)據(jù)和資源。

使用異步數(shù)據(jù)

asyncData 方法是 Nuxt.js 獨有的，允許您在服務器上預取數(shù)據(jù)并在客戶端上重用它。在上面的示例中，我們只是更改了 message 的值，但在實際應用中，您可能會在這里調(diào)用 API 來獲取數(shù)據(jù)。

中間件

中間件（Middleware）是一個功能，可以讓你在路由改變之前和之后執(zhí)行特定的邏輯。中間件可以在全局、頁面級別或布局級別使用，以處理身份驗證、數(shù)據(jù)預加載、路由防護等任務。

1. 全局中間件

全局中間件在 nuxt.config.js 文件中配置，并影響應用程序中的所有頁面：

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

中間件文件通常位于middleware/目錄下，如middleware/globalMiddleware1.js：

├── .nuxt/ # Automatically generated files, including compiled code and configuration
├── assets/ # Used to store uncompiled static resources, such as CSS, images, fonts
├── components/ # Custom Vue components
├── layouts/ # Application layout files, defining the general structure of the page
│ └── default.vue # Default layout
├── middleware/ # Middleware files
├── pages/ # Application routes and views, each file corresponds to a route
│ ├── index.vue # Default homepage
│ └── [slug].vue # Dynamic routing example
├── plugins/ # Custom Vue.js plugins
├── static/ # Static resources, will be copied to the output directory as is
├── store/ # Vuex state management file
│ ├── actions.js # Vuex actions
│ ├── mutations.js # Vuex mutations
│ ├── getters.js # Vuex getters
│ └── index.js # Vuex store entry file
├── nuxt.config.js # Nuxt.js configuration file
├── package.json # Project dependencies and scripts
└── yarn.lock # Or npm.lock, record dependency versions

2.頁面級中間件

頁面級中間件僅影響特定頁面。在頁面組件中聲明中間件：

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

對應的中間件文件位于middleware/目錄下，例如middleware/pageMiddleware.js：

├── .nuxt/ # Automatically generated files, including compiled code and configuration
├── assets/ # Used to store uncompiled static resources, such as CSS, images, fonts
├── components/ # Custom Vue components
├── layouts/ # Application layout files, defining the general structure of the page
│ └── default.vue # Default layout
├── middleware/ # Middleware files
├── pages/ # Application routes and views, each file corresponds to a route
│ ├── index.vue # Default homepage
│ └── [slug].vue # Dynamic routing example
├── plugins/ # Custom Vue.js plugins
├── static/ # Static resources, will be copied to the output directory as is
├── store/ # Vuex state management file
│ ├── actions.js # Vuex actions
│ ├── mutations.js # Vuex mutations
│ ├── getters.js # Vuex getters
│ └── index.js # Vuex store entry file
├── nuxt.config.js # Nuxt.js configuration file
├── package.json # Project dependencies and scripts
└── yarn.lock # Or npm.lock, record dependency versions

3.布局級中間件

布局級中間件與頁面級類似，但它適用于所有使用布局的頁面。在布局組件中聲明中間件：

<!-- pages/index.vue -->
<template>
  <div>
    <h1>Hello from Nuxt.js SSR</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'This content is server-rendered!'
    };
  },
  asyncData() {
    // Here you can get data on the server side
    // The returned data will be used as the default value of data
    return { message: 'Data fetched on server' };
  }
};
</script>

對應的中間件文件位于middleware/目錄：

// nuxt.config.js
export default {
// ...
    router: {
        middleware: ['globalMiddleware1', 'globalMiddleware2'] // can be a string array
    }
};

中間件上下文

中間件函數(shù)接收一個上下文對象作為參數(shù)，其中包含以下屬性：

req（HTTP請求對象，僅在服務器端有效）
res（HTTP響應對象，僅在服務器端有效）
redirect（用于重定向的函數(shù)）
app（Vue 實例）
路線（當前路線信息）
store（Vuex 商店，如果啟用）
payload（如果有asyncData返回的數(shù)據(jù)）

中間件可以順序執(zhí)行，每個中間件都可以通過重定向功能決定是繼續(xù)執(zhí)行鏈中的下一個中間件還是中斷路由。

動態(tài)路由

Nuxt.js支持動態(tài)路由，這對于處理博客文章、用戶個人資料等具有動態(tài)ID的內(nèi)容非常有用。在pages/目錄中創(chuàng)建動態(tài)路由文件，例如[id].vue:

// middleware/globalMiddleware1.js
export default function (context) {
    // context contains information such as req, res, redirect, app, route, store, etc.
    console.log('Global Middleware 1 executed');
}

這里的[id]代表一個動態(tài)參數(shù)，asyncData會自動處理這個參數(shù)并獲取對應ID的博文。

布局
布局允許您定義全局或特定頁面的通用結(jié)構(gòu)。在layouts/目錄下創(chuàng)建default.vue文件：

// pages/about.vue
export default {
    middleware: 'pageMiddleware' // can be a string or a function
};

默認情況下，所有頁面都將使用此布局。如果你想為特定頁面設(shè)置不同的布局，可以在頁面組件中指定：

// middleware/pageMiddleware.js
export default function (context) {
    console.log('Page Middleware executed');
}

插件和庫集成
Nuxt.js 支持 Vue.js 插件，您可以在 nuxt.config.js 中配置：

// layouts/default.vue
export default {
    middleware: ['layoutMiddleware1', 'layoutMiddleware2']
};

然后在plugins/目錄下創(chuàng)建對應的文件，如vuetify.js：

// middleware/layoutMiddleware1.js
export default function (context) {
    console.log('Layout Middleware 1 executed');
}

// middleware/layoutMiddleware2.js
export default function (context) {
    console.log('Layout Middleware 2 executed');
}

配置與優(yōu)化

Nuxt.js 配置文件 (nuxt.config.js)

nuxt.config.js 是 Nuxt 應用程序的主要配置文件，用于自定義應用程序的行為。以下是一些常用的配置項：

mode：設(shè)置應用程序的運行模式?？蛇x值為'spa'（單頁應用）、'universal'（服務器端渲染）和'static'（靜態(tài)生成）。默認為“通用”。
head：配置頁面的部分，如標題、元數(shù)據(jù)、鏈接等
css：指定全局CSS文件，可以是文件路徑數(shù)組
build：配置構(gòu)建過程，例如transpile、extractCSS、extend等。例如，您可以在此處添加Babel插件或調(diào)整Webpack配置。
router：自定義路由配置，如基本路徑、模式等
axios：配置axios模塊，包括基礎(chǔ)URL、代理設(shè)置等
plugins：注冊全局Vue插件，可以指定在客戶端或者服務端加載。
modules：加載外部模塊，如@nuxtjs/axios、@nuxtjs/proxy等
env：定義環(huán)境變量，該變量將在構(gòu)建時注入到客戶端和服務器中。

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

優(yōu)化策略

異步數(shù)據(jù)預?。╝syncData/fetch）：使用asyncData或fetch方法在服務器端預取數(shù)據(jù)，以減輕客戶端渲染的負擔。
代碼拆分：Nuxt.js 自動拆分代碼，確保只有在訪問路由時才加載相關(guān)代碼。
靜態(tài)站點生成（SSG）：使用 nuxtgenerate 命令生成靜態(tài) HTML 文件，適合內(nèi)容變化不頻繁的站點，提高加載速度和 SEO 友好性。
緩存策略：使用ETag、Last-Modified等HTTP緩存策略，減少重復請求。
Vue.js 優(yōu)化：確保Vue組件的優(yōu)化，比如避免無用的watchers、使用v-once減少重新渲染等
圖片優(yōu)化：使用正確的圖片格式（如WebP），保證圖片大小合適，使用延遲加載技術(shù)。
Service Worker：集成 PWA 支持并使用 Service Worker 進行離線緩存和推送通知。
Tree Shaking：確保您的依賴項支持 Tree Shaking 以刪除未使用的代碼。
分析與監(jiān)控：使用 nuxt build --analyze 或集成第三方工具（如 Google Lighthouse）進行性能分析，持續(xù)監(jiān)控應用性能。

靜態(tài)站點生成 (SSG)

Nuxt.js 的靜態(tài)站點生成（SSG）是通過 nuxtgenerate 命令實現(xiàn)的。該命令遍歷應用程序的路由并為每個路由生成一個預渲染的 HTML 文件，該文件可以直接部署到任何靜態(tài)文件托管服務。以下是有關(guān) SSG 的一些要點：

1。配置：在nuxt.config.js文件中，可以配置generate選項來控制靜態(tài)生成的行為：

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

2。生成：運行npm rungenerate或yarngenerate來啟動靜態(tài)生成過程。 Nuxt.js會根據(jù)generate.routes中的配置生成相應的HTML文件。如果沒有顯式定義，會自動掃描pages/目錄下的所有文件生成路由。

3。數(shù)據(jù)預取：在頁面組件中，可以使用asyncData或fetch方法來預取數(shù)據(jù)。這些數(shù)據(jù)會在生成靜態(tài)頁面時注入到 HTML 中，這樣客戶端加載時頁面不需要額外的請求：

├── .nuxt/ # Automatically generated files, including compiled code and configuration
├── assets/ # Used to store uncompiled static resources, such as CSS, images, fonts
├── components/ # Custom Vue components
├── layouts/ # Application layout files, defining the general structure of the page
│ └── default.vue # Default layout
├── middleware/ # Middleware files
├── pages/ # Application routes and views, each file corresponds to a route
│ ├── index.vue # Default homepage
│ └── [slug].vue # Dynamic routing example
├── plugins/ # Custom Vue.js plugins
├── static/ # Static resources, will be copied to the output directory as is
├── store/ # Vuex state management file
│ ├── actions.js # Vuex actions
│ ├── mutations.js # Vuex mutations
│ ├── getters.js # Vuex getters
│ └── index.js # Vuex store entry file
├── nuxt.config.js # Nuxt.js configuration file
├── package.json # Project dependencies and scripts
└── yarn.lock # Or npm.lock, record dependency versions

4。中間件處理：SSG過程中不會執(zhí)行服務器端中間件，因為SSG在沒有服務器環(huán)境的情況下生成靜態(tài)文件。因此，如果生成時需要執(zhí)行一些邏輯，最好在 asyncData 或 fetch 中處理。

5。部署：生成的靜態(tài)文件可以部署到任何靜態(tài)文件托管服務，例如 Netlify、Vercel、GitHub Pages 或 AWS S3。這些服務通常不需要運行任何服務器端代碼，只需上傳生成的 dist 文件夾即可。

6。 SEO 優(yōu)化：SSG 改進了 SEO，因為搜索引擎爬蟲可以讀取預渲染的 HTML 內(nèi)容，而無需等待 JavaScript 執(zhí)行。

7。動態(tài)路由：對于動態(tài)路由，Nuxt.js 將嘗試生成所有可能的組合。如果無法預測所有可能的動態(tài)路由，可以在generate.routes中手動指定，或者使用generate.includePaths和generate.excludePaths進行控制。

8。 404頁面：將generate.fallback設(shè)置為true將為未預渲染的動態(tài)路由生成404頁面。當用戶訪問這些路由時，Nuxt.js 會嘗試在客戶端渲染它們。

運行 nuxtgenerate 命令，Nuxt.js 將生成靜態(tài) HTML 文件。

驗證和錯誤處理

驗證

驗證通常涉及表單數(shù)據(jù)或 API 請求的輸入驗證。 Nuxt.js 本身不直接提供驗證庫，但你可以集成第三方庫如 Vuelidate、vee-validate，或者使用 TypeScript 進行類型檢查。

使用 Vee-Validate
1.安裝：首先需要安裝vee-validate庫：

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

2。配置：在nuxt.config.js中添加Vue插件配置：

├── .nuxt/ # Automatically generated files, including compiled code and configuration
├── assets/ # Used to store uncompiled static resources, such as CSS, images, fonts
├── components/ # Custom Vue components
├── layouts/ # Application layout files, defining the general structure of the page
│ └── default.vue # Default layout
├── middleware/ # Middleware files
├── pages/ # Application routes and views, each file corresponds to a route
│ ├── index.vue # Default homepage
│ └── [slug].vue # Dynamic routing example
├── plugins/ # Custom Vue.js plugins
├── static/ # Static resources, will be copied to the output directory as is
├── store/ # Vuex state management file
│ ├── actions.js # Vuex actions
│ ├── mutations.js # Vuex mutations
│ ├── getters.js # Vuex getters
│ └── index.js # Vuex store entry file
├── nuxt.config.js # Nuxt.js configuration file
├── package.json # Project dependencies and scripts
└── yarn.lock # Or npm.lock, record dependency versions

3。創(chuàng)建插件：在plugins/vee-validate.js中配置Vee-Validate：

<!-- pages/index.vue -->
<template>
  <div>
    <h1>Hello from Nuxt.js SSR</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'This content is server-rendered!'
    };
  },
  asyncData() {
    // Here you can get data on the server side
    // The returned data will be used as the default value of data
    return { message: 'Data fetched on server' };
  }
};
</script>

4。用法：在組件中使用 Vee-Validate 進行表單驗證：

// nuxt.config.js
export default {
// ...
    router: {
        middleware: ['globalMiddleware1', 'globalMiddleware2'] // can be a string array
    }
};

錯誤處理

Nuxt.js 提供了多種處理錯誤的方法，包括全局錯誤處理和特定于頁面的錯誤處理。

全局錯誤處理

自定義錯誤頁面：在layouts目錄下創(chuàng)建error.vue文件，用于自定義錯誤頁面布局。
捕獲全局錯誤：在 nuxt.config.js 中配置 error 屬性來捕獲全局錯誤：

// middleware/globalMiddleware1.js
export default function (context) {
    // context contains information such as req, res, redirect, app, route, store, etc.
    console.log('Global Middleware 1 executed');
}

頁面特定的錯誤處理

在頁面組件中，可以使用asyncData或fetch方法的try-catch結(jié)構(gòu)來處理錯誤：

// pages/about.vue
export default {
    middleware: 'pageMiddleware' // can be a string or a function
};

API 請求錯誤處理

對于API請求，如果使用@nuxtjs/axios模塊，可以在請求攔截器中統(tǒng)一處理錯誤：

// middleware/pageMiddleware.js
export default function (context) {
    console.log('Page Middleware executed');
}

確保在 nuxt.config.js 中注冊此插件。

Vue生態(tài)系統(tǒng)整合

Vue路由器：

Nuxt.js 根據(jù)文件結(jié)構(gòu)自動為您的應用程序生成路由系統(tǒng)。路由配置通常不需要手動編寫，而是可以通過nuxt.config.js的router屬性進行擴展。

視圖：

Nuxt.js 自動創(chuàng)建一個 Vuex 存儲。在 store 目錄下，您可以創(chuàng)建模塊化狀態(tài)、突變、操作和 getter。例如，創(chuàng)建一個 store/modules/users.js 文件來管理用戶數(shù)據(jù)。

// layouts/default.vue
export default {
    middleware: ['layoutMiddleware1', 'layoutMiddleware2']
};

Vue 命令行界面：

Nuxt.js 提供了自己的構(gòu)建工具，但它也是基于 Vue CLI 的。這意味著您可以使用類似于 Vue CLI 的命令行工具，例如 npx nuxtgenerate（靜態(tài)生成）或 npxnuxtbuild（構(gòu)建應用程序）。

通天塔：

Nuxt.js 默認配置了 Babel 以支持最新的 JavaScript 功能。除非有特殊需要，通常不需要手動配置 Babel。

打字稿：

要使用 TypeScript，請在?? nuxt.config.js 中設(shè)置 typescript: true ，Nuxt.js 將自動配置 TypeScript 支持。

ESLint：

為了檢查代碼質(zhì)量，您可以在項目中安裝 ESLint 并配置 .eslintrc.js。 Nuxt.js 提供 @nuxt/eslint-module 插件來簡化集成。

// middleware/layoutMiddleware1.js
export default function (context) {
    console.log('Layout Middleware 1 executed');
}

// middleware/layoutMiddleware2.js
export default function (context) {
    console.log('Layout Middleware 2 executed');
}

Vue使用：

VueUse 是一個 Vue 用例庫，包含各種實用功能。要集成，首先安裝@vueuse/core，然后導入并使用組件中的功能。

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

├── .nuxt/ # Automatically generated files, including compiled code and configuration
├── assets/ # Used to store uncompiled static resources, such as CSS, images, fonts
├── components/ # Custom Vue components
├── layouts/ # Application layout files, defining the general structure of the page
│ └── default.vue # Default layout
├── middleware/ # Middleware files
├── pages/ # Application routes and views, each file corresponds to a route
│ ├── index.vue # Default homepage
│ └── [slug].vue # Dynamic routing example
├── plugins/ # Custom Vue.js plugins
├── static/ # Static resources, will be copied to the output directory as is
├── store/ # Vuex state management file
│ ├── actions.js # Vuex actions
│ ├── mutations.js # Vuex mutations
│ ├── getters.js # Vuex getters
│ └── index.js # Vuex store entry file
├── nuxt.config.js # Nuxt.js configuration file
├── package.json # Project dependencies and scripts
└── yarn.lock # Or npm.lock, record dependency versions

Vue 插件：

可以通過nuxt.config.js中的plugins配置項全局注冊Vue插件。例如，集成 Vue Toastify 來顯示通知：

<!-- pages/index.vue -->
<template>
  <div>
    <h1>Hello from Nuxt.js SSR</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'This content is server-rendered!'
    };
  },
  asyncData() {
    // Here you can get data on the server side
    // The returned data will be used as the default value of data
    return { message: 'Data fetched on server' };
  }
};
</script>

// nuxt.config.js
export default {
// ...
    router: {
        middleware: ['globalMiddleware1', 'globalMiddleware2'] // can be a string array
    }
};