【Nuxt3】Nuxt3脚手架nuxi安装项目和项目目录介绍

news2024/12/25 23:09:42

简言

最近学了Nuxt3,并使用它创建了自己的小网站。记录下学习到的nuxt3内容。
Nuxt3官网
Nuxt 是一个免费的开源框架,可通过直观、可扩展的方式使用 Vue.js 创建类型安全、高性能、生产级的全栈 Web 应用程序和网站。
支持SSR、SPA、建立静态网站,也可以混合渲染(SSR+SPA)。

Nuxt3项目创建

nuxi脚手架下载项目模板

创建前提条件:

  • Node.js - v18.0.0 或更新版本
  • 文本编辑器 - 建议使用带有 Volar 扩展的 Visual Studio Code
  • 终端 - 以便运行 Nuxt 命令

<project-name>就是你的项目名

npx nuxi@latest init <project-name>

pnpm dlx nuxi@latest init <project-name>

注意点:

  • npm源不要用淘宝源
  • 最好有梯子安装
  • 关闭防火墙

报网络错误

hosts文件添加下面内容:
hosts路径:C:\Windows\System32\drivers\etc

# Some other ip address nuxt3
185.199.108.133 raw.githubusercontent.com
185.199.111.133 raw.githubusercontent.com

模板下载错误

如下所示:
在这里插入图片描述
先试试 设置网络的 首选DNS为 : 114.114.114.114
还不行的话可以梯子,找到代理端口,使用下方命令创建项目:
9080端口换成代理端口,注意是nuxi-nightly

npx nuxi-nightly@latest init nuxt-app http_proxy=http://localhost:9080 

问题详情:issues159

都不行

实在不行就去gitee、github找别人nuxt3模板吧。
这是我的

目录运行

创建项目后运行项目:
1

code <project-name>


2

npm install

3

npm run dev

即可成功,默认端口3000.
在这里插入图片描述

目录介绍

一个nuxt3项目目录差不多如下图所示:
在这里插入图片描述

  • .nuxt ---- 项目的编译好的文件。Nuxt 在开发过程中使用 .nuxt/ 目录来生成 Vue 应用程序。
  • .output ---- 在为生产构建应用程序时,Nuxt 会创建 .output/ 目录。
  • assets ---- 项目资源文件,assets/ 目录用于添加构建工具将处理的所有网站资产。
  • components ---- components/ 目录是放置所有 Vue 组件的地方。
  • composables ------ 公共函数(hook)文件夹
  • content ----- 使用 content/ 目录为您的应用程序创建基于文件的内容管理系统。
  • layouts ----- Nuxt 提供了一个布局框架,可将常见的用户界面模式提取为可重复使用的布局。
  • middleware ---- Nuxt 提供了中间件,用于在导航到特定路由之前运行代码。
  • modules ----- 存放模块的文件夹
  • pages ----- 页面文件夹。 Nuxt 提供基于文件的路由功能,可在网络应用程序中创建路由。
  • plugins ------- 插件文件夹。 Nuxt 有一个插件系统,可在创建 Vue 应用程序时使用 Vue 插件等。
  • public ----- 静态资源文件夹 public/ 目录用于提供网站的静态资产。
  • server ---- server/ 目录用于向应用程序注册 API 和服务器处理程序。
  • utils ----- 工具函数文件夹 使用 utils/ 目录可在整个应用程序中自动导入实用程序函数。
  • .env ----- 文件指定了构建/开发时的环境变量。
  • app.config.ts ---- 通过 App Config 文件在应用程序中公开反应式配置。
  • app.vue ---- 根组件,文件是 Nuxt 应用程序的主要组件。
  • nuxt.config.ts ----- nuxt3配置文件,只需一个 nuxt.config 文件即可轻松配置 Nuxt。
  • tsconfig.json ---- ts配置文件。
  • package.json ---- 项目脚本和依赖描述文件。

结语

nuxt3仓库在github上,那个nuxi脚手架。。。国内不好用它创建项目,网络不行多试几次就行。

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

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

相关文章

C++ 图形界面学习效果及代码

#include <stdio.h> #include<conio.h> #include <stdlib.h> #include<graphics.h> #define WIDTH 800 #define HEIGHT 480 #define SIZE 20 int main() {const char* str "人生就是由欲望不满足而痛苦和满足之后无趣这两者所构成";const …

【征服redis1】基础数据类型详解和应用案例

博客计划 &#xff0c;我们从redis开始&#xff0c;主要是因为这一块内容的重要性不亚于数据库&#xff0c;但是很多人往往对redis的问题感到陌生&#xff0c;所以我们先来研究一下。 本篇&#xff0c;我们先看一下redis的基础数据类型详解和应用案例。 1.redis概述 以mysql为…

性能测试之全链路压测正确优化思路

性能测试之全链路压测的优化需要从多个方面入手&#xff0c;包括明确压测目标、模拟真实场景、选择合适的工具和技术、合理设计压测方案、分析性能瓶颈以及持续监控和改进等。通过这些措施的实施&#xff0c;可以有效地提高系统的性能和稳定性&#xff0c;为用户提供更好的服务…

ffmpeg解码音频planar模式和packed模式

转载&#xff1a;原文地址&#xff1a; FFmpeg连载4-音频解码-阿里云开发者社区ffmpeg连载系列https://developer.aliyun.com/article/1197520 转载的&#xff0c;看到了&#xff0c;留着备份一下 导读 前面我们介绍了使用FFmpeg解码视频&#xff0c;今天我们使用FFmpeg解码音…

MySQL的多表数据记录查询笔记

关系数据操作 合并查询数据记录 在MySQL中通过关键字UNION来实现并操作&#xff0c;即可以通过其将多个SELECT语句的查询结果合并在一起组成新的关系。 两张表&#xff0c;表1 和表2 带有关键字UNION的合并操作 关键字UNION会把查询结果集直接合并在一起&#xff0c;同时将…

现代控制理论基础

在学习卡尔曼滤波、粒子滤波、隐马尔可夫模型时候&#xff0c;经常会提到状态方程的概念&#xff0c;这边联想到当时学习过的一门课程现代控制理论&#xff0c;这边就简单回顾一下吧。在回顾之前&#xff0c;串联下高等数学中微分方程的知识点。 一. 微分方程 高等数学上册第…

今年的年终奖开了个寂寞

大家好啊&#xff0c;我是董董灿。 年底了&#xff0c;又到了一些公司开年终奖的时候了&#xff0c;往年这个时候&#xff0c;网上都是争相"炫富"的声音。 还记得去年某公司&#xff0c;在春节前一下子开出了十几个月的年终奖&#xff0c;让我羡慕了好长时间。 可…

JAVAEE——request对象(三)

1. request对象 1.1 知识点 &#xff08;1&#xff09;乱码问题的两种解决方式 &#xff08;2&#xff09;post和get提交的区别 &#xff08;3&#xff09;request接收同名参数的问题 1.2 具体内容 使用request接收参数 <%page contentType"text/html; charsetut…

深入理解 go chan

go 里面&#xff0c;在实际程序运行的过程中&#xff0c;往往会有很多协程在执行&#xff0c;通过启动多个协程的方式&#xff0c;我们可以更高效地利用系统资源。 而不同协程之间往往需要进行通信&#xff0c;不同于以往多线程程序的那种通信方式&#xff0c;在 go 里面是通过…

C++ Primer 6.3 返回类型和return语句 知识点+练习题

C Primer 6.3 返回类型和return语句 无返回值函数有返回值的函数两个错误值是如何被返回的返回类类型的函数和调用运算符引用返回左值列表初始化返回值主函数main的返回值返回数组指针 递归练习题疑问待更新 无返回值函数 用在返回值类型为void的函数中&#xff0c;可以不写re…

01章【JAVA开发入门】

计算机基本概念 计算机组成原理 计算机组装 计算机&#xff1a;电子计算机&#xff0c;俗称电脑。是一种能够按照程序运行&#xff0c;自动、高速处理海量数据的现代化智能电子设备。由硬件和软件所组成&#xff0c;没有安装任何软件的计算机称为裸机。常见的形式有台式计算机、…

浅析五种 React 组件设计模式

作为一名 React 开发者&#xff0c;你可能会面临下面几个问题&#xff1a; 如何构建一个高复用度性的组件&#xff0c;使其适应不同的业务场景&#xff1f;如何构建一个具有简单 API的组件&#xff0c;使其易于使用&#xff1f;如何构建一个在 UI 和功能方面具有可扩展性的组件…

Vue3-TS中的接口-泛型-自定义类型

1首先一般在src下新建types文件夹&#xff0c;用来存放接口类型 2定义一个接口&#xff0c;用于限制person对象的具体属性 当需要用这个类型形成数组时&#xff0c;有2种写法 export type Persons Array<PersonInter> export type Persons PersonInter[] 3在文件中使…

检索增强生成技术(RAG)深度优化指南:原理、挑战、措施、展望

ChatGPT、Midjourney等生成式人工智能&#xff08;GenAI&#xff09;在文本生成、文本到图像生成等任务中表现出令人印象深刻的性能。然而&#xff0c;生成模型也不能避免其固有的局限性&#xff0c;包括产生幻觉的倾向&#xff0c;在数学能力弱&#xff0c;而且缺乏可解释性。…

C++基础算法之贪心

临渊羡鱼 不如退而结网 &#x1f3a5;烟雨长虹&#xff0c;孤鹜齐飞的个人主页 &#x1f525;个人专栏 寒假带大家手撕算法 期待小伙伴们的支持与关注&#xff01;&#xff01;&#xff01; 目录 贪心算法的简介 贪心算法的介绍# 贪心的基本原理# 贪心的局限性# 贪心的特征# 贪…

用julia演示蝴蝶效应:洛伦兹吸引子

文章目录 Lorentz吸引子julia绘图关闭抗锯齿 蝴蝶效应的名字来源于蝴蝶扇动翅膀的动作&#xff0c;虽然这个动作微小&#xff0c;但可能会在数周后引起飓风等极端天气的发生。这种现象表明&#xff0c;微小的变化可能会被放大并产生非线性的结果。这个概念最早由美国气象学家爱…

【开源】基于JAVA的康复中心管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 普通用户模块2.2 护工模块2.3 管理员模块 三、系统展示四、核心代码4.1 查询康复护理4.2 新增康复训练4.3 查询房间4.4 查询来访4.5 新增用药 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpringBootMySQL的康复中…

C++中map按照从大到小的顺序存储元素

map按照从大到小存储元素 引言map的大致介绍概述 场景误区示例示例代码&#xff08;方法一&#xff09;运行结果示例代码二&#xff08;方法二&#xff09;运行结果 引言 在对map的使用中&#xff0c;由于对业务的需要&#xff0c;希望map中存储元素能够按照键的大小从大到小的…

【EI会议征稿通知】2024年第三届能源互联网及能源交互技术国际会议(EIEIT 2024)

2024年第三届能源互联网及能源交互技术国际会议(EIEIT 2024) 2024 3rd International Conference on the Energy Internet and Energy Interactive Technology 随着EIEIT前2届的成功举办&#xff0c;我们很荣幸地宣布&#xff0c;2024年第三届能源互联网及能源交互技术国际学术…