NUXT3学习日记一(在我git中拉取代码、文件讲解)

Nuxt 3 是一个基于 Vue 3 的现代框架,用于构建服务器端渲染(SSR)和静态生成的应用程序。它提供了一种简化的方式来创建高性能的 Vue 应用,具有许多强大的功能和优点。以下是 Nuxt 3 的一些主要应用和优点:

一、应用场景

  1. 服务器端渲染(SSR)

    • Nuxt 3 可以轻松构建服务器端渲染的应用,这样可以提高页面加载速度和 SEO 优化,因为内容在服务器上生成并发送到客户端。
  2. 静态网站生成(SSG)

    • 适合构建博客、文档和营销网站,Nuxt 3 支持静态生成,允许在构建时生成 HTML 文件,从而实现快速加载和高效的 SEO。
  3. 单页应用(SPA)

    • Nuxt 3 还支持单页应用的构建,适用于需要快速交互和动态内容的应用。
  4. 渐进式增强

    • 可以逐步将现有的 Vue 应用迁移到 Nuxt 3,利用其强大的路由和状态管理功能。
  5. API 集成

    • Nuxt 3 适合与各种 API 集成,可以轻松与后端服务交互,构建动态数据驱动的应用。

二、优点

  1. 基于 Vue 3

    利用 Vue 3 的新特性,如组合式 API,提高了代码的可读性和可维护性。
  2. 自动路由生成

    Nuxt 3 会根据 pages 目录中的文件自动生成路由,简化了路由管理。
  3. 模块化

    Nuxt 3 提供了丰富的模块系统,允许开发者快速集成功能,如身份验证、国际化、PWA 支持等。
  4. 性能优化

    内置的自动代码分割、懒加载和静态资源优化功能,确保应用在不同网络条件下都能快速加载。
  5. 开发体验

    提供了热重载、TypeScript 支持和出色的错误处理,使开发过程更加高效和愉快。
  6. 灵活的配置

    Nuxt 3 的配置选项非常灵活,允许开发者根据项目需求自定义设置。
  7. 中间件支持

    支持在路由之间使用中间件,便于处理权限、数据获取等逻辑。
  8. 强大的社区支持

    Nuxt 3 拥有活跃的社区和丰富的文档,开发者可以轻松找到帮助和资源。

三、nuxt3的下载

官方下载命令:npx nuxi@latest init nuxt3-app

ps:node版本最好18以上

如果不出意外的话,你可能会报错吧,如下所示:

那么怎么解决呢?

您也许已经看过别的博主的解决方法了,无非是

1、将DNS服务器地址修改为114.114.114.114 

2、或者是根据C:\Windows\System32\drivers\etc\hosts 路径找到此文件,右击记事本打开,在最后追加 185.199.108.133 raw.githubusercontent.com,如下:

 

3、最终你可能还是不能下载,哈哈哈~~~~~~~~~~

不卖关子了,要不你直接去我git仓库下载吧,下载完成之后直接恢复依赖就可以了

git仓库地址:http://git clone https://gitee.com/wjl001123/nuxt3-basic-template.git 

4、npm i 恢复依赖,npm run dev运行就好了 

运行效果如下:

5、另外呢,所有的目录都配置完事时是这样的:

 

.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 ---- 项目脚本和依赖描述文件。

四、总结

Nuxt 3 是一个功能强大且灵活的框架,适合构建各种类型的现代 Web 应用。其基于 Vue 3 的架构、自动路由生成、模块化设计和优化性能等优点,使得开发者能够快速构建高效、可维护的应用。

最后再次提醒,可以直接去git仓库扒代码,简单容易

git仓库地址:http://git clone https://gitee.com/wjl001123/nuxt3-basic-template.git 

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue3项目中内嵌vuepress工程两种实现方式

目录 一、示例二、创建vuepress工程三、配置vue项目的打包命令四、 通过iframe嵌套实现过程五、 将vue项目打包,启本地服务运行index.html 一、示例 vue项目,点击用户手册按钮,通过a标签跳转到vuepress框架搭建的页面。点击后者通过路由跳转…

简述 synchronized 和 java.util.concurrent.locks.Lock 的异同?

大家好,我是锋哥。今天分享关于【简述 synchronized 和 java.util.concurrent.locks.Lock 的异同?】面试题。希望对大家有帮助; 简述 synchronized 和 java.util.concurrent.locks.Lock 的异同? 在Java编程中,synchro…

centos7上安装mysql

1.现查看虚拟机上有没有wget包,如果没有的话进行安装 yum install -y wget 2.进入MySQL :: Download MySQL Yum Repository下载mysql安装源 找到与linux相应的版本,复制地址,如果找不到地址,可以复制如下 3.下载mysql官方yum源 …

操作系统离散存储练习题

1. (简答题)分页存储管理系统具有快表,内存访问时间为2ns,检索快表时间为0.5ns,快表命中率为80%,求有效访问时间 -分析:首先访问缓存(快表),如果没有找到访问内存(页表&…

PHP搭建开发环境(Windows系统)

要搭建一个完整的PHP动态网站,离不开操作系统、Web服务器、数据库、和PHP软件。 虽然有不错方便的方式,比如使用phpstudio等等等等许多面板都是非常快速不错的方式,但是这里是教会大家如何配置而不只是依赖别人整合好的面板软件,…

开源 2 + 1 链动模式、AI 智能名片、S2B2C 商城小程序在用户留存与品牌发展中的应用研究

摘要:本文以企业和个人品牌发展中至关重要的用户留存问题为切入点,结合管理大师彼得德鲁克对于企业兴旺发达的观点,阐述了用户留存对品牌营收的关键意义。在此基础上,深入分析开源 2 1 链动模式、AI 智能名片、S2B2C 商城小程序在…

SpringBoot后端解决跨域问题

1.全局方式 新建一个conifg配置类,内容如下: Configuration public class CorsConfig implements WebMvcConfigurer {Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**")//是否发送Cookie.allowCrede…

「数据要素」行业简报|2024.11.上刊

纵观数据要素行业动态,洞察行业风向,把握行业脉搏! 一、政策发布 1、《山东省公共数据资源登记管理工作规范(试行)》公开征求意见 11月7日,为认真贯彻落实《中共中央办公厅 国务院办公厅关于加快公共数据资源开发利用的意见》《…

什么是RAG? LangChain的RAG实践!

1. 什么是RAG RAG的概念最先在2020年由Facebook的研究人员在论文《Retrieval-Augmented Generation for Knowledge-Intensive NLP Tasks》中提出来。在这篇论文中他们提出了两种记忆类型: 基于预训练模型(当时LLM的概念不像现在这么如日中天&#xff0…

Vite初始化Vue3+Typescrpt项目

初始化项目 安装 Vite 首先,确保你的 Node.js 版本 > 12.0.0。然后在命令行中运行以下命令来创建一个 Vite Vue 3 TypeScript 的项目模板: npm init vitelatest进入项目目录 创建完成后,进入项目目录: cd vue3-demo启动…

nginx部署H5端程序与PC端进行区分及代理多个项目及H5内页面刷新出现404问题。

在项目中会碰见需要在nginx代理多个项目,如果在加上uniapp开发的H5端的项目,你还要在nginx中区分PC端和手机H5端,这就会让人很头大!网上大部分的资料都是采用在nginx的conf配置文件中添加区分pc和手机端的变量例如:set…

软件测试项目实战

软件测试是使用人工或者自动的手段来运行或者测定某个软件系统的过程,其目的在于检验它是否满足规定的需求或弄清预期结果与实际结果之间的差别。 在软件投入使用前,要经过一系列的严格测试,才能保证交付质量。 一、引言 1.编写目的 本文档…

2024开发者浏览器必备扩展,不允许还有人不知道~

在开发过程中,优秀的扩展工具能够极大提升我们的工作效率,简化工作流程,并使得在浏览器中的开发和调试变得更加便捷。 根据市场占比,Chrome、Safari、Edge、Firefox、Opera 是前五大浏览器,其中Chrome浏览器占据了领先…

分享一个傻瓜式一键启动的加速器

主要发现开通一个号能电脑手机互通,原来电脑手机各一个加速器钱包在滴血。。。一个月也很便宜差不多二十多 链接放这了,有需要自提:首页-小熊加速器http://xxjsq.co/ytfa

TDesign了解及使用

文章目录 1、概述2、快速开始2.1使用 npm 安装2.2通过 浏览器引入 安装2.3、使用 3、简单案例3.1 路由创建3.2、 页面创建3.3、 Table组件3.4、序号展示3.5、 图片展示及预览3.6、 性别字段处理 1、概述 TDesign 是腾讯推出的设计系统,旨在提供一致的设计语言和视觉…

11Java面向对象高级(篇2,Java程序的核心套路!!!!)

更多java知识请点击上面专栏!!! 修道之始: 01Java基础入门(纯小白也能入门,速通Java,知识点归纳超级全面!!!2024版后端成仙起始篇!!!…

定时器(QTimer)与随机数生成器(QRandomGenerator)的应用实践——Qt(C++)

一、QTimer与QRandomGenerator (一)QTimer(定时器)[2] QTimer类为定时功能提供了一个高级编程接口。在使用QTimer时,实例化一个QTimer对象并将其timeout()发射信号与合适的信号槽相连接。通过调用QTimer的start()函数…

翼鸥教育:从OceanBase V3.1.4 到 V4.2.1,8套核心集群升级实践

引言:自2021年起,翼鸥教育便开始应用OceanBase社区版,两年间,先后部署了总计12套生产集群,其中核心集群占比超过四分之三,所承载的数据量已突破30TB。自2022年10月,OceanBase 社区发布了4.2.x 版…

AI绘画经验(stable-diffusion)

提示词理解 总的 AI绘画的优点是【想象力】,而不是自然语言的精确描述。 AI绘画只能控制【主体】和【风格】,姿势,表情,装饰,手指都太过于详细了。这也是【人类画师的魅力】 准确描述是徒劳的,只能通过【…

使用支付宝沙箱完成商品下单

使用支付宝沙箱完成商品下单 一:效果展示: 二:代码实现 1:准备工作: 申请支付宝沙箱账户: 登录 - 支付宝 然后要下载密钥密钥工具来生成密钥; 2:流程分析: 先是用户…