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

相关文章

Spring Boot项目打包和运行的操作方法

《SpringBoot项目打包和运行的操作方法》SpringBoot应用内嵌了Web服务器,所以基于SpringBoot开发的web应用也可以独立运行,无须部署到其他Web服务器中,下面以打包dem... 目录一、打包为JAR包并运行1.打包为可执行的 JAR 包2.运行 JAR 包二、打包为WAR包并运行

Nginx部署React项目时重定向循环问题的解决方案

《Nginx部署React项目时重定向循环问题的解决方案》Nginx在处理React项目请求时出现重定向循环,通常是由于`try_files`配置错误或`root`路径配置不当导致的,本文给大家详细介... 目录问题原因1. try_files 配置错误2. root 路径错误解决方法1. 检查 try_f

Java 如何创建和使用ExecutorService

《Java如何创建和使用ExecutorService》ExecutorService是Java中用来管理和执行多线程任务的一种高级工具,可以有效地管理线程的生命周期和任务的执行过程,特别是在需要处... 目录一、什么是ExecutorService?二、ExecutorService的核心功能三、如何创建

解决Maven项目报错:failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.13.0的问题

《解决Maven项目报错:failedtoexecutegoalorg.apache.maven.plugins:maven-compiler-plugin:3.13.0的问题》这篇文章主要介... 目录Maven项目报错:failed to execute goal org.apache.maven.pl

使用Python创建一个功能完整的Windows风格计算器程序

《使用Python创建一个功能完整的Windows风格计算器程序》:本文主要介绍如何使用Python和Tkinter创建一个功能完整的Windows风格计算器程序,包括基本运算、高级科学计算(如三... 目录python实现Windows系统计算器程序(含高级功能)1. 使用Tkinter实现基础计算器2.

Python开发文字版随机事件游戏的项目实例

《Python开发文字版随机事件游戏的项目实例》随机事件游戏是一种通过生成不可预测的事件来增强游戏体验的类型,在这篇博文中,我们将使用Python开发一款文字版随机事件游戏,通过这个项目,读者不仅能够... 目录项目概述2.1 游戏概念2.2 游戏特色2.3 目标玩家群体技术选择与环境准备3.1 开发环境3

CentOS和Ubuntu系统使用shell脚本创建用户和设置密码

《CentOS和Ubuntu系统使用shell脚本创建用户和设置密码》在Linux系统中,你可以使用useradd命令来创建新用户,使用echo和chpasswd命令来设置密码,本文写了一个shell... 在linux系统中,你可以使用useradd命令来创建新用户,使用echo和chpasswd命令来设

使用Python和Pyecharts创建交互式地图

《使用Python和Pyecharts创建交互式地图》在数据可视化领域,创建交互式地图是一种强大的方式,可以使受众能够以引人入胜且信息丰富的方式探索地理数据,下面我们看看如何使用Python和Pyec... 目录简介Pyecharts 简介创建上海地图代码说明运行结果总结简介在数据可视化领域,创建交互式地

SpringBoot项目中报错The field screenShot exceeds its maximum permitted size of 1048576 bytes.的问题及解决

《SpringBoot项目中报错ThefieldscreenShotexceedsitsmaximumpermittedsizeof1048576bytes.的问题及解决》这篇文章... 目录项目场景问题描述原因分析解决方案总结项目场景javascript提示:项目相关背景:项目场景:基于Spring

解决Maven项目idea找不到本地仓库jar包问题以及使用mvn install:install-file

《解决Maven项目idea找不到本地仓库jar包问题以及使用mvninstall:install-file》:本文主要介绍解决Maven项目idea找不到本地仓库jar包问题以及使用mvnin... 目录Maven项目idea找不到本地仓库jar包以及使用mvn install:install-file基