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

server/2024/11/28 10:08:57/

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

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 来创建一个新的项目。在命令行中运行以下命令:

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

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

3. 进入项目目录

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

cd nuxt3-app

4. 启动开发服务器

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

npm run dev

或者,如果你使用的是 Yarn,则运行:

yarn dev

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

5. 添加子页面

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

  • 创建第一个子页面:在 pages/ 目录下创建一个名为 page1.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 的文件,并添加一些基本内容:
<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 中:

<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.vuepage2.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:项目的依赖和脚本配置文件。

http://www.ppmy.cn/server/145597.html

相关文章

BERT的配置

BERT的配置 BERT-base&#xff1a; BERT-base由12层编码器叠加而成。每层编码器都使用12个注意力头&#xff0c;其中前馈网络层由768个隐藏神经元组成&#xff0c;所以从BERT-base得到的特征向量的大小是768。 我们使用以下符号来表示上述内容。 ● 编码器的层数用L表示。 …

InstructGPT——AI 模型的对齐革命

InstructGPT——AI 模型的对齐革命 近年来&#xff0c;人工智能领域中大型语言模型的发展速度令人瞩目。其中&#xff0c;OpenAI 发布的 InstructGPT 是一次重要的技术革新&#xff0c;它通过引入人类反馈强化学习&#xff08;Reinforcement Learning with Human Feedback, RL…

17. 【.NET 8 实战--孢子记账--从单体到微服务】--记账模块--主币种设置

记账模块是我们项目的核心模块&#xff0c;也是用户使用最多的模块&#xff0c;因此这个模块的东西比较多&#xff0c;我们要分为多个部分编写代码。 一、需求 币种设置的需求涉及到了我们前面编写的代码&#xff0c;我们来具体看一下需求。 编号需求说明1主币种设置1. 用户…

git源码安装

源码安装。执行以下步骤&#xff1a; 使用"wget"命令下载Git源码包&#xff0c;例如&#xff1a;"wget https://www.kernel.org/pub/software/scm/git/git-2.0.5.tar.gz"。 使用"tar"命令解压缩下载的源码包&#xff0c;例如&#xff1a;"…

C语言编码规范

以下是一套较为完整的C语言编码规范&#xff1a; 一、代码布局 缩进 使用空格进行缩进&#xff0c;每级缩进为4个空格。这样可以保证代码在不同的编辑器和环境中都有一致的缩进效果。例如&#xff1a; if (condition) {// 这里缩进了4个空格statement1;statement2; }大括号 函…

快速理解微服务中Fegin的概念

一.由来 1.在传统的架构里面&#xff0c;我们是通过使用RestTemplate来访问其他的服务&#xff0c;但是这种方式就存在了一个很大的缺陷&#xff0c;也就是被调用方如果发生了服务的迁移(IP和端口发生了变化)&#xff0c;那么调用方也需要同步的在代码里面进行修改&#xff0c;…

大数据新视界 -- Hive 与其他大数据工具的集成:协同作战的优势(上)(13/ 30)

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

PHP实现插入排序

插入排序&#xff08;Insertion Sort&#xff09;是一种简单直观的排序算法&#xff0c;适用于少量数据的排序。它的工作原理是通过构建有序序列&#xff0c;对于未排序数据&#xff0c;在已排序序列中从后向前扫描&#xff0c;找到相应位置并插入。以下是一个用PHP实现插入排序…