Nuxt.js掌握其核心概念的示例代碼

Nuxt.js 是一個基於 Vue.js 的服務器渲染應用框架。通過 Nuxt.js，你可以快速地構建出性能出色的 Web 應用。

以下是掌握 Nuxt.js 核心概念的示例代碼：

項目初始化

首先，你需要全局安裝 nuxt：

bash
npm install -g nuxt
然後初始化一個新的 Nuxt.js 項目：

bash
nuxt init
接着進入項目目錄並安裝依賴：

bash
cd my-nuxt-app  
npm install

路由配置

在 Nuxt.js 中，路由配置是通過 pages 目錄完成的。例如，如果你想創建一個名為 about 的頁面，你可以在 pages 目錄下創建一個名為 about.vue 的文件。這個文件會作為該頁面的模板。

3. 頁面組件

你可以在 pages 目錄中創建任何數量的頁面組件。每個組件都應為一個 .vue 文件。例如，你可以創建一個簡單的 home.vue 組件：

vue
<template>  
  <div>  
    <h1>Welcome to the Home Page!</h1>  
  </div>  
</template>

佈局

Nuxt.js 支持嵌套佈局。在 layouts 目錄下創建你的佈局。例如，你可以創建一個簡單的 default.vue 佈局：

vue
<template>  
  <div>  
    <header>  
      <!-- 在這裏放置你的導航、logo 等 -->  
    </header>  
    <main>  
      <!-- 這裏是頁面的主要內容 -->  
      <Nuxt /> <!-- 將內容傳遞給 Nuxt 組件 -->  
    </main>  
    <footer>  
      <!-- 在這裏放置你的頁腳信息 -->  
    </footer>  
  </div>  
</template>

插件

Nuxt.js 支持使用插件來擴展其功能。你可以使用 npm 或 yarn 來安裝插件，然後在 plugins 目錄下創建對應的 JavaScript 文件。例如，安裝 vue-analytics 並將其配置為插件：

6. 數據和狀態管理

Nuxt.js 使用 Vuex 進行狀態管理，你可以在 store 目錄下創建 Vuex store。例如，創建一個簡單的計數器 store：