vue-29（创建 Nuxt.js 项目）

创建 Nuxt.js 项目

Nuxt.js 简化了构建服务器端渲染的 Vue.js 应用的过程，提供了一种结构化的方法以及众多内置功能。设置 Nuxt.js 项目是利用其功能以提升 SEO、性能和用户体验的关键第一步。本课程将指导你完成创建新 Nuxt.js 项目的流程，探索可用的安装方法，并理解初始项目结构。

创建新的 Nuxt.js 项目

创建新的 Nuxt.js 项目主要有两种方式：使用 create-nuxt-app（已弃用但仍可使用）或使用 npx nuxi init <project-name>。推荐的方式是使用 npx nuxi init <project-name>。

使用 npx nuxi init <project-name>（推荐）

npx 允许你在不全局安装的情况下运行 Node.js 包。nuxi 是 Nuxt 的命令行工具。这是启动 Nuxt 3 项目的现代且推荐的方式。

1. 打开你的终端： 前往你想要创建项目的目录。

2. 运行命令：

   npx nuxi init my-nuxt-app
   

   将 my-nuxt-app 替换为您想要的项目名称。

3. 进入项目目录：

   cd my-nuxt-app
   

4. 安装依赖：

   npm install  # or yarn install or pnpm install
   

5. 运行开发服务器：

   npm run dev # or yarn dev or pnpm dev
   

   这将启动 Nuxt.js 开发服务器，通常位于 http://localhost:3000。

理解项目结构

创建 Nuxt.js 项目后，了解目录结构至关重要。以下是关键目录和文件的分解说明：

• pages/: 此目录包含应用程序的页面。Nuxt.js 会根据此目录中的文件自动创建路由。例如，pages/index.vue 成为根路由 (/)，而 pages/about.vue 成为 /about 路由。
• components/: 这个目录用于存放你的 Vue.js 组件。这些组件可以在你的页面、布局或其他组件中使用。
• layouts/: 布局定义了你的页面的整体结构。你可以为应用的不同部分设置不同的布局。默认情况下，所有页面都会应用 default.vue 布局。
• app.vue: 这是你的 Nuxt 3 应用程序的主要入口点。它与标准 Vue 应用程序中的 App.vue 文件类似，但 Nuxt 使用它来在服务器和客户端渲染应用程序。
• nuxt.config.ts (或 nuxt.config.js): 该文件包含 Nuxt.js 应用程序的配置选项。你可以配置模块、插件、CSS、构建设置等。
• package.json: 该文件包含项目的依赖项和脚本。它由 npm（或 yarn 或 pnpm）用于管理项目。
• public/: 该目录包含图像、字体和其他应直接提供的服务静态资源。
• server/: 此目录用于创建服务器路由和 API。Nuxt.js 会自动处理这些路由的服务器端逻辑。

示例：创建一个简单的页面

让我们创建一个简单的"关于"页面，以说明 Nuxt.js 如何处理路由。

1. 创建 pages/about.vue:

   <template>
     <div>
       <h1>About Us</h1>
       <p>This is the about page of our Nuxt.js application.</p>
     </div>
   </template>
   
   <script setup>
   // You can add any setup logic here
   </script>
   

2. 访问页面： 在浏览器中导航至 http://localhost:3000/about。你应该能看到"关于我们"页面。

示例：使用组件

让我们创建一个简单的组件，并在我们的"关于"页面中使用它。

1. 创建 components/MyComponent.vue：

   <template>
     <div>
       <h2>My Component</h2>
       <p>This is a reusable component.</p>
     </div>
   </template>
   
   <script setup>
   // You can add any setup logic here
   </script>
   

2. 在 pages/about.vue 组件中使用：

   <template>
     <div>
       <h1>About Us</h1>
       <p>This is the about page of our Nuxt.js application.</p>
       <MyComponent />
     </div>
   </template>
   
   <script setup>
   import MyComponent from '~/components/MyComponent.vue';
   </script>
   

   现在，当你刷新 /about 页面时，你也应该看到"我的组件"部分。

示例：修改默认布局

让我们修改默认布局，以包含页眉和页脚。

1. 修改 layouts/default.vue：

   <template>
     <div>
       <header>
         <h1>My Nuxt.js App</h1>
         <nav>
           <NuxtLink to="/">Home</NuxtLink> | <NuxtLink to="/about">About</NuxtLink>
         </nav>
       </header>
       <main>
         <NuxtPage />
       </main>
       <footer>
         <p>&copy; 2023 My Company</p>
       </footer>
     </div>
   </template>
   
   <style scoped>
   header {
     background-color: #f0f0f0;
     padding: 10px;
     text-align: center;
   }
   
   nav {
     margin-top: 10px;
   }
   
   main {
     padding: 20px;
   }
   
   footer {
     background-color: #f0f0f0;
     padding: 10px;
     text-align: center;
     margin-top: 20px;
   }
   </style>
   

   现在，所有页面都将使用在 default.vue 布局中定义的页眉和页脚。NuxtLink 用于 Nuxt 应用内部的链接，提供客户端导航。NuxtPage 是一个组件，用于渲染当前页面的内容。