创建一个简单的 Nuxt.js 应用

记录一下自己创建一个使用 Vue 3 的 Nuxt.js 应用的过程。该应用包含两个子页面，相对简单。最大的坑是创建项目时用了如下的命令：

bash 复制代码

npx create-nuxt-app pic-first-nuxt

结果如论如何都创建不出来，要不就卡住，要不就报错：

ERROR Error: Failed to download template from registry: Failed to download https://raw.githubusercontent.com/nuxt/starter/templates/templates/v3.json: TypeError: fetch failed

因此才决定记录一下这个创建过程。

P.s. 前端开发坑真多，版本之间所带来的开发差异，出了问题查都查不到！

1. 安装 Node.js 和 npm

确保你的计算机上安装了 Node.js 和 npm。你可以在 Node.js 官方网站下载并安装它们。

2. 创建一个新的 Nuxt.js 3 项目

使用 Nuxt.js 提供的脚手架工具 npx 来创建一个新的项目。在命令行中运行以下命令：

bash 复制代码

npx create-nuxt-app@latest pic-first-nuxt

将 nuxt3-app 替换为你想要的项目名称。这个命令会下载并安装最新版本的 Nuxt.js 3 及其依赖项，并为你生成一个基本的项目结构。

3. 进入项目目录

命令执行完成后，进入新创建的项目目录：

bash 复制代码

cd nuxt3-app

4. 启动开发服务器

在项目目录中，运行以下命令来启动开发服务器：

bash 复制代码

npm run dev

或者，如果你使用的是 Yarn，则运行：

bash 复制代码

yarn dev

开发服务器启动后，你可以在浏览器中打开 http://localhost:3000 来查看你的 Nuxt.js 应用。默认情况下，它会显示一个欢迎页面。

5. 添加子页面

在 Nuxt.js 中，页面通常放在 pages/ 目录下。每个 .vue 文件都会自动成为一个路由。

创建第一个子页面：在 pages/ 目录下创建一个名为 page1.vue 的文件，并添加一些基本内容：

vue 复制代码

<template>
  <div>
    <h1>Page 1</h1>
    <p>This is the first sub-page.</p>
  </div>
</template>

<script setup>
</script>

<style scoped>
/* 添加一些样式（可选） */
</style>

创建第二个子页面：在 pages/ 目录下创建一个名为 page2.vue 的文件，并添加一些基本内容：

vue 复制代码

<template>
  <div>
    <h1>Page 2</h1>
    <p>This is the second sub-page.</p>
  </div>
</template>

<script setup>
</script>

<style scoped>
/* 添加一些样式（可选） */
</style>

6. 导航到子页面

你可以在 layouts/default.vue 中添加一个导航栏，或者使用 Nuxt.js 提供的 <NuxtLink> 组件在页面的其他地方创建链接。

例如，在 layouts/default.vue 中：

vue 复制代码

<template>
  <div>
    <nav>
      <ul>
        <li><NuxtLink to="/">Home</NuxtLink></li>
        <li><NuxtLink to="/page1">Page 1</NuxtLink></li>
        <li><NuxtLink to="/page2">Page 2</NuxtLink></li>
      </ul>
    </nav>
    <NuxtPage />
  </div>
</template>

<script setup>
</script>

<style>
/* 添加一些全局样式（可选） */
nav ul {
  list-style-type: none;
  padding: 0;
}

nav ul li {
  display: inline;
  margin-right: 10px;
}
</style>

这里的 <NuxtPage /> 组件是一个特殊的组件，它会被替换为当前路由对应的页面组件。

7. 运行并查看应用

回到命令行，确保开发服务器仍在运行。现在，你可以在浏览器中打开 http://localhost:3000，你应该能看到包含导航栏的主页。点击导航栏中的链接，你应该能够导航到 page1.vue 和 page2.vue 对应的页面。

这样，你就创建了一个使用 Vue 3 的 Nuxt.js 应用，并包含了两个子页面。你可以根据需要进一步自定义和扩展你的应用。

8. 大型应用常用的项目结构

Nuxt.js 大型项目通常包含以下文件和目录：

assets/：用于存放静态资源，如 CSS、JavaScript 和图片文件。
components/：用于存放 Vue 组件。
layouts/：用于定义页面的布局。
middleware/：用于存放中间件函数。
pages/：用于存放应用的页面组件。Nuxt.js 会根据这个目录下的 .vue 文件自动生成路由。
plugins/：用于存放 Vue 插件。
store/：用于存放 Vuex 状态管理库的状态树。
.nuxt/：这是 Nuxt.js 在构建和运行时生成的目录，通常不需要手动修改。
nuxt.config.js：这是 Nuxt.js 的配置文件，你可以在这里配置应用的各种选项。
package.json：项目的依赖和脚本配置文件。