DAY2:Nuxt.js環境

在開始使用Nuxt.js之前，我們需要設置和瞭解其開發環境。這個環境將讓我們能夠建立和運行Nuxt.js應用程序，並進行開發、測試和部署。以下是一些必要的步驟和內容，以幫助您建立Nuxt.js環境。

步驟1：Node.js和npm的安裝

首先，確保您的計算機上安裝了Node.js和npm（Node Package Manager）。您可以在Node.js官方網站下載安裝包並按照說明進行安裝。這是開發Nuxt.js應用程序的基本先決條件。

步驟2：創建Nuxt.js專案

一旦Node.js和npm安裝完成，我們可以開始創建Nuxt.js專案。使用以下命令在您選擇的目錄中創建一個新的Nuxt.js應用程序：

npx create-nuxt-app my-nuxt-app

此命令將引導您完成創建過程，包括選擇配置選項和插件。您可以按照提示進行操作。

步驟3：運行Nuxt.js應用程序

創建專案後，進入專案目錄：

cd my-nuxt-app

然後運行Nuxt.js開發伺服器：

npm run dev

這將啟動開發伺服器，並使您的Nuxt.js應用程序在本地運行。您可以在瀏覽器中訪問http://localhost:3000，看到應用程序的首頁。

步驟4：專案結構和文件

瞭解Nuxt.js專案的結構和文件布局是非常重要的。主要的目錄和文件包括：

pages/：這個目錄包含您的應用程序的頁面，每個文件代表一個路由。例如，pages/index.vue代表首頁。
components/：這個目錄是用於存放可重用組件的地方。您可以在應用程序中引入這些組件。
static/：這個目錄用於存放靜態資源，如圖片或檔案。它們可以通過/路徑訪問，例如，/static/images/logo.png。
store/：這個目錄包含Vuex store的模塊，用於管理應用程序的狀態。
layouts/：這個目錄包含佈局文件，用於定義頁面的整體佈局結構。
middleware/：這個目錄包含中間件，可用於處理頁面的請求和響應。
plugins/：這個目錄包含插件文件，用於配置和擴展應用程序。

步驟5：開始編輯和測試

現在，您已經設置了Nuxt.js環境並運行了應用程序，您可以開始編輯和測試代碼。在pages/目錄中的文件是入口點，您可以開始在那裡創建您的頁面。

以下是一個簡單的範例，創建一個新的頁面pages/about.vue：

<template>
  <div>
    <h1>About Us</h1>
    <p>Welcome to our website!</p>
  </div>
</template>

<script>
export default {
    // 這裡是你頁面特定的邏輯處理
}
</script>

<style scoped>
/* 在這裡放置你頁面特定的樣式 */
</style>

如果你想要讓 h1 標題的文字變成紅色，你可以寫：

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

在編輯完頁面後，您可以在瀏覽器中訪問新頁面，例如http://localhost:3000/about，來看效果。

這就是第二天的學習內容，我們已經成功設置了Nuxt.js的開發環境並創建了一個簡單的頁面。