Nuxt 项目的创建

news2024/12/24 9:10:53

中文文档: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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1571260.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【MATLAB】GA_BP神经网络时序预测算法

有意向获取代码&#xff0c;请转文末观看代码获取方式~ 1 基本定义 GA_BP神经网络时序预测算法是一种结合了遗传算法(GA)和反向传播(BP)神经网络的时序预测方法。它利用了遗传算法的全局搜索和优化能力&#xff0c;以及BP神经网络的学习和逼近能力&#xff0c;可以更有效地预…

[java]网络编程

网络编程概述 计算机网络&#xff1a; 把分布在不同地理区域的具有独立功能的计算机,通过通信设备与线路连接起来&#xff0c;由功能完善的软件实现资源共享和信息传递的系统。 Java是 Internet 上的语言&#xff0c;它从语言级上提供了对网络应用程序的支持&#xff0c;程序…

【MySQL】聚合函数和分组聚合

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前学习计网、mysql和算法 ✈️专栏&#xff1a;MySQL学习 &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章对你有帮助的话 欢迎 评论&#x1f4ac…

渗透测试靶机----Raven-1

渗透测试靶机----Raven-1 开启靶机&#xff0c;登录窗&#xff0c;平平无奇 开扫&#xff1a; 先看看ip 这里发现192.168.217.166 发现相关服务端口&#xff0c;这里看到80&#xff0c;还是老样子&#xff0c;先80入手打开发现一个熟悉的站点&#xff1a; 这里可以使用漏扫工具…

解密项目管理工具数据安全:防火防盗,保密有招

相关数据显示&#xff0c;2021年中国数字经济规模总量达到45.5万亿元&#xff0c;占到国内GDP总量的39.8%。数字经济已经渗入我们工作生活的方方面面&#xff0c;项目管理工具就是其中之一&#xff0c;在数据安全备受重视的今天如何保证项目管理工具的数据安全性&#xff1f;Zo…

C-开发 visual Studio扩展插件介绍-格式化插件Xaml Styler、CSharpier介绍(扩展插件安装方法)

C#开发 visual Studio扩展插件介绍 扩展插件安装方法Xaml StylerCSharpier 提高C#开发效率常用的插件 扩展插件安装方法 菜单栏点击“扩展”→“管理扩展”。 打开扩展页面 右上角搜索需要安装的插件&#xff0c;然后点击下载 安装完成后&#xff0c;根据提示关闭VS进行安…

MPEG-1 详解

MPEG-1 详解 MPEG-1 详解特点MPEG-1 中的运动补偿与 B 帧的引入MPEG-1 vs H.261MPEG-1 视频数据流的结构MPEG-1 视频压缩模式MPEG-1 视频解码框图MPEG-1 音频编码模式MPEG-1 audio layer 1MPEG-1 audio layer 2MPEG-1 audio layer 3 MPEG-1 音频编码框图MPEG-1 音频解码框图参考…

大数据实验四-MapReduce编程实践

一&#xff0e;实验内容 MapReduce编程实践&#xff1a; 使用MapReduce实现多个文本文件中WordCount词频统计功能&#xff0c;实验编写Map处理逻辑、编写Reduce处理逻辑、编写main方法。 二&#xff0e;实验目的 1、通过实验掌握基本的MapReduce编程方法。 2、实现统计HDF…

使用阿里云试用Elasticsearch学习:1.2 基础入门——数据输入和输出

什么是文档? 在大多数应用中&#xff0c;多数实体或对象可以被序列化为包含键值对的 JSON 对象。 一个 键 可以是一个字段或字段的名称&#xff0c;一个 值 可以是一个字符串&#xff0c;一个数字&#xff0c;一个布尔值&#xff0c; 另一个对象&#xff0c;一些数组值&#…

Linux+HA高可用24X7的安全保证

一&#xff0e; 介绍作为服务器&#xff0c;需要提供一定的24X7的安全保证&#xff0c;这样可以防止关键节点的宕机引起系统的全面崩溃。利用OpenSource开源软件&#xff0c;完成系统的高可靠双机热备方案。基于linux的 HA软件可靠稳定&#xff0c;比使用商业版本的HA软件降低成…

中国智慧城管哪家做的好?

智慧城市管理综合执法系统建立全市统一的法律法规、裁量基准、执法事项、执法文书和基础信息库&#xff0c;实现从获取线索、立案、调查、处理到结案全过程的信息化和文书制作的智能化。全面支持移动执法办案&#xff0c;提高执法效率。 技术架构&#xff1a; 微服务javasprin…

arm开发板移植工具mkfs.ext4

文章目录 一、前言二、手动安装e2fsprogs1、下载源码包2、解压源码3、配置4、编译5、安装 三、移植四、验证五、总结 一、前言 在buildroot菜单中&#xff0c;可以通过勾选e2fsprogs工具来安装mkfs.ext4工具&#xff1a; Target packages -> Filesystem and flash utilit…

【Python】免费的图片/图标网站

专栏文章索引&#xff1a;Python 有问题可私聊&#xff1a;QQ&#xff1a;3375119339 这里是我收集的几个免费的图片/图标网站&#xff1a; iconfont-阿里巴巴矢量图标库icon&#xff08;.ico&#xff09;INCONFINDER&#xff08;.ico&#xff09;

力扣刷题 二叉树的迭代遍历

题干 给你二叉树的根节点 root &#xff0c;返回它节点值的 前中后序 遍历。 示例 1&#xff1a; 输入&#xff1a;root [1,null,2,3] 输出&#xff1a;[1,2,3]示例 2&#xff1a; 输入&#xff1a;root [] 输出&#xff1a;[]示例 3&#xff1a; 输入&#xff1a;root […

智慧农业新篇章:数字乡村引领农业现代化

随着信息技术的飞速发展&#xff0c;数字乡村正成为引领农业现代化的重要力量。智慧农业作为数字乡村的核心内容&#xff0c;以其高效、精准、可持续的特点&#xff0c;为农业现代化开辟了新篇章。本文将从智慧农业的内涵与特点、数字乡村在农业现代化中的引领作用、智慧农业发…

机器学习第33周周报Airformer

文章目录 week33 AirFormer摘要Abstract一、论文的前置知识1. 多头注意力机制&#xff08;MSA&#xff09;2. 具有潜变量的变分模型 二、文献阅读1. 题目2. abstract3. 问题与模型阐述3.1 问题定义3.2 模型概述3.3 跨空间MSA&#xff08;DS-MSA&#xff09;3.4 时间相关MSA&…

小程序如何设置余额充值和消费功能

小程序中设置余额充值和消费功能非常重要的&#xff0c;通过让客户在小程序中进行余额充值&#xff0c;不仅可以提高用户粘性&#xff0c;还可以促进消费&#xff0c;增加用户忠诚度。以下是如何在小程序中设置余额充值和消费功能的步骤&#xff1a; 1. **设计充值入口**&…

Cisco Nexus 9000v Switch, NX-OS Release 10.4(3)F

Cisco Nexus 9000v Switch, NX-OS Release 10.4(3)F 用于网络原型设计和学习研究的虚拟化数据中心交换机 请访问原文链接&#xff1a;https://sysin.org/blog/cisco-nexus-9000v/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;sysin.o…

【软件测试】测试常见知识点汇总

测试常见知识点汇总 一、什么是测试1.1 测试和调试的区别1.2 什么是需求1.2.1 用户需求1.2.2 软件需求 1.3 测试用例要素1.4 软件的生命周期及各阶段概述1.5 开发模型和测试模型&#xff08;记住特点和适用场景&#xff09;1.5.1 开发模型1.5.1.1 瀑布模型&#xff08;自上而下…

微信小程序生命周期管理:从数据初始化到事件绑定

作为一个独立的应用开发平台,微信小程序提供了自己的生命周期机制,与我们熟悉的Vue.js框架有一些差异。掌握小程序生命周期的特点和使用技巧,对于开发高质量的小程序应用至关重要。深入理解和掌握小程序生命周期的使用技巧,将有助于我们构建出更加健壮和可维护的小程序应用。 小…