当前位置：首页 > web >正文

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

web 2025/6/29 19:37:38

创建 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 项目的现代且推荐的方式。

打开你的终端： 前往你想要创建项目的目录。
运行命令：
```
npx nuxi init my-nuxt-app
```
将 my-nuxt-app 替换为您想要的项目名称。
进入项目目录：
```
cd my-nuxt-app
```

安装依赖：

npm install  # or yarn install or pnpm install

运行开发服务器：
```
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 如何处理路由。

创建 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>

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

示例：使用组件

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

创建 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>

在 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 页面时，你也应该看到"我的组件"部分。

示例：修改默认布局

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

修改 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>