Nuxt 项目的创建

2024-04-06 04:12
文章标签 项目 创建 nuxt

本文主要是介绍Nuxt 项目的创建,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

中文文档:https://nuxt.com.cn/docs/getting-started/installation#%E6%96%B0%E9%A1%B9%E7%9B%AE
Nuxt 项目创建的先决条件:

  • Node.js 版本 18.0.0 及以上
  • 文本编辑器:VS Code + Volar 插件 或 Webstorm

执行如下命令,创建 Nuxt 项目

<project-name> 为你的项目名

npx nuxi@latest init <project-name>

由于 Nuxt 下载请求的服务器域名,DNS 对 Nuxt 服务器域名会解析失败,所以我们大概率会出现如下情况:
image.png
如果出现上述失败的情况,我们可以尝试下面的解决方法

解决方法来源:https://blog.csdn.net/weixin_47979438/article/details/135843762

该解决方法就是在 nuxt 下载时,让其直接请求 Nuxt 所在的服务器主机 IP 进行下载,不需要经过中间的 DNS 服务器域名解析
从报错信息中,我们已经知道 Nuxt 服务器的域名为 raw.githubusercontent.com
所以,首先在 https://sites.ipaddress.com/ 中查询 raw.githubusercontent.com 对应的服务器 IP 地址
image.png
查询的 IP 结果在查询结果页面的中下部分
image.png
然后在自己电脑的 C:\Windows\System32\drivers\etc 目录下的 hosts 文件中添加如下内容,将 Nuxt 服务器域名与其服务器 IP 地址直接映射,这样子我们的电脑发出下载 Nuxt 下载请求,就无需找 DNS 域名解析服务器进行域名的解析,避免DNS 对 Nuxt 服务器域名解析失败

# 将 Nuxt 下载请求的服务器域名与其服务器 IP 直接映射
185.199.108.133 raw.githubusercontent.com
185.199.109.133 raw.githubusercontent.com
185.199.110.133 raw.githubusercontent.com
185.199.111.133 raw.githubusercontent.com

image.png
然后保存替换掉原来的 hosts 文件
此时,我们在尝试重新创建 Nuxt 项目,下载 Nuxt 即可成功:
image.png
然后,进入项目根目录,安装项目所需依赖

包管理工具选择了 pnpm

pnpm i

image.png
然后我们就可以通过执行如下命令,运行 Nuxt 项目:

pnpm run dev

image.png
然后,在浏览器中通过 http://localhost:3000/ 访问
image.png

这篇关于Nuxt 项目的创建的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/878974

相关文章

一文教你如何将maven项目转成web项目

《一文教你如何将maven项目转成web项目》在软件开发过程中,有时我们需要将一个普通的Maven项目转换为Web项目,以便能够部署到Web容器中运行,本文将详细介绍如何通过简单的步骤完成这一转换过程... 目录准备工作步骤一:修改​​pom.XML​​1.1 添加​​packaging​​标签1.2 添加

idea中创建新类时自动添加注释的实现

《idea中创建新类时自动添加注释的实现》在每次使用idea创建一个新类时,过了一段时间发现看不懂这个类是用来干嘛的,为了解决这个问题,我们可以设置在创建一个新类时自动添加注释,帮助我们理解这个类的用... 目录前言:详细操作:步骤一:点击上方的 文件(File),点击&nbmyHIgsp;设置(Setti

tomcat多实例部署的项目实践

《tomcat多实例部署的项目实践》Tomcat多实例是指在一台设备上运行多个Tomcat服务,这些Tomcat相互独立,本文主要介绍了tomcat多实例部署的项目实践,具有一定的参考价值,感兴趣的可... 目录1.创建项目目录,测试文China编程件2js.创建实例的安装目录3.准备实例的配置文件4.编辑实例的

springboot集成Deepseek4j的项目实践

《springboot集成Deepseek4j的项目实践》本文主要介绍了springboot集成Deepseek4j的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录Deepseek4j快速开始Maven 依js赖基础配置基础使用示例1. 流式返回示例2. 进阶

SpringBoot项目启动报错"找不到或无法加载主类"的解决方法

《SpringBoot项目启动报错找不到或无法加载主类的解决方法》在使用IntelliJIDEA开发基于SpringBoot框架的Java程序时,可能会出现找不到或无法加载主类com.example.... 目录一、问题描述二、排查过程三、解决方案一、问题描述在使用 IntelliJ IDEA 开发基于

SpringBoot项目使用MDC给日志增加唯一标识的实现步骤

《SpringBoot项目使用MDC给日志增加唯一标识的实现步骤》本文介绍了如何在SpringBoot项目中使用MDC(MappedDiagnosticContext)为日志增加唯一标识,以便于日... 目录【Java】SpringBoot项目使用MDC给日志增加唯一标识,方便日志追踪1.日志效果2.实现步

Spring 中使用反射创建 Bean 实例的几种方式

《Spring中使用反射创建Bean实例的几种方式》文章介绍了在Spring框架中如何使用反射来创建Bean实例,包括使用Class.newInstance()、Constructor.newI... 目录1. 使用 Class.newInstance() (仅限无参构造函数):2. 使用 Construc

C#原型模式之如何通过克隆对象来优化创建过程

《C#原型模式之如何通过克隆对象来优化创建过程》原型模式是一种创建型设计模式,通过克隆现有对象来创建新对象,避免重复的创建成本和复杂的初始化过程,它适用于对象创建过程复杂、需要大量相似对象或避免重复初... 目录什么是原型模式?原型模式的工作原理C#中如何实现原型模式?1. 定义原型接口2. 实现原型接口3

Ubuntu中Nginx虚拟主机设置的项目实践

《Ubuntu中Nginx虚拟主机设置的项目实践》通过配置虚拟主机,可以在同一台服务器上运行多个独立的网站,本文主要介绍了Ubuntu中Nginx虚拟主机设置的项目实践,具有一定的参考价值,感兴趣的可... 目录简介安装 Nginx创建虚拟主机1. 创建网站目录2. 创建默认索引文件3. 配置 Nginx4

SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法

《SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法》本文主要介绍了SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法,具有一定的参考价值,感兴趣的可以了解一下... 目录方法1:更改IDE配置方法2:在Eclipse中清理项目方法3:使用Maven命令行在开发Sprin