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

相关文章

Java 虚拟线程的创建与使用深度解析

《Java虚拟线程的创建与使用深度解析》虚拟线程是Java19中以预览特性形式引入,Java21起正式发布的轻量级线程,本文给大家介绍Java虚拟线程的创建与使用,感兴趣的朋友一起看看吧... 目录一、虚拟线程简介1.1 什么是虚拟线程?1.2 为什么需要虚拟线程?二、虚拟线程与平台线程对比代码对比示例:三

k8s按需创建PV和使用PVC详解

《k8s按需创建PV和使用PVC详解》Kubernetes中,PV和PVC用于管理持久存储,StorageClass实现动态PV分配,PVC声明存储需求并绑定PV,通过kubectl验证状态,注意回收... 目录1.按需创建 PV(使用 StorageClass)创建 StorageClass2.创建 PV

vite搭建vue3项目的搭建步骤

《vite搭建vue3项目的搭建步骤》本文主要介绍了vite搭建vue3项目的搭建步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1.确保Nodejs环境2.使用vite-cli工具3.进入项目安装依赖1.确保Nodejs环境

Linux创建服务使用systemctl管理详解

《Linux创建服务使用systemctl管理详解》文章指导在Linux中创建systemd服务,设置文件权限为所有者读写、其他只读,重新加载配置,启动服务并检查状态,确保服务正常运行,关键步骤包括权... 目录创建服务 /usr/lib/systemd/system/设置服务文件权限:所有者读写js,其他

idea+spring boot创建项目的搭建全过程

《idea+springboot创建项目的搭建全过程》SpringBoot是Spring社区发布的一个开源项目,旨在帮助开发者快速并且更简单的构建项目,:本文主要介绍idea+springb... 目录一.idea四种搭建方式1.Javaidea命名规范2JavaWebTomcat的安装一.明确tomcat

pycharm跑python项目易出错的问题总结

《pycharm跑python项目易出错的问题总结》:本文主要介绍pycharm跑python项目易出错问题的相关资料,当你在PyCharm中运行Python程序时遇到报错,可以按照以下步骤进行排... 1. 一定不要在pycharm终端里面创建环境安装别人的项目子模块等,有可能出现的问题就是你不报错都安装

uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)

《uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)》在uni-app开发中,文件上传和图片处理是很常见的需求,但也经常会遇到各种问题,下面:本文主要介绍uni-app小程序项目中实... 目录方式一:使用<canvas>实现图片压缩(推荐,兼容性好)示例代码(小程序平台):方式二:使用uni

MyCat分库分表的项目实践

《MyCat分库分表的项目实践》分库分表解决大数据量和高并发性能瓶颈,MyCat作为中间件支持分片、读写分离与事务处理,本文就来介绍一下MyCat分库分表的实践,感兴趣的可以了解一下... 目录一、为什么要分库分表?二、分库分表的常见方案三、MyCat简介四、MyCat分库分表深度解析1. 架构原理2. 分

linux查找java项目日志查找报错信息方式

《linux查找java项目日志查找报错信息方式》日志查找定位步骤:进入项目,用tail-f实时跟踪日志,tail-n1000查看末尾1000行,grep搜索关键词或时间,vim内精准查找并高亮定位,... 目录日志查找定位在当前文件里找到报错消息总结日志查找定位1.cd 进入项目2.正常日志 和错误日

在.NET项目中嵌入Python代码的实践指南

《在.NET项目中嵌入Python代码的实践指南》在现代开发中,.NET与Python的协作需求日益增长,从机器学习模型集成到科学计算,从脚本自动化到数据分析,然而,传统的解决方案(如HTTPAPI或... 目录一、CSnakes vs python.NET:为何选择 CSnakes?二、环境准备:从 Py