首页 > 其他分享 >【Nuxt】初识 Nuxt 和目录说明

【Nuxt】初识 Nuxt 和目录说明

时间:2024-08-03 17:52:38浏览次数:9  
标签:渲染 SSR 初识 SSG Nuxt 目录 路由 CSR

初识 Nuxt

Nuxt3 支持 Vue3 及其周边生态,提供前后端功能,支持 CSR(SPA),SSR,SSG 渲染模式的应用。

Nuxt3 特点:

  • Vue技术栈
    • Nuxt3是基于Vue3+Vue Router+Vite等技术栈,全程Vue3+Vite开发体验(Fast)。
  • 自动导包
    • Nuxt 会自动导入辅助函数、组合API和Vue API,无需手动导入。
    • 基于规范的目录结构,Nuxt还可以对自己的组件、插件使用自动导入。
  • 约定式路由(目录结构即路由)
    • Nuxt路由基于vue-router,在pages/目录中创建的每个页面,都会根据目录结构和文件名来自动生成路由
  • 渲染模式:Nuxt支持多种渲染模式(SSR、CSR、SSG等)
  • 利于搜索引擎优化:服务器端渲染模式,不但可以提高首屏渲染速度,还利于SEO
  • 服务器引擎
    • 在开发环境中,它使用Rollup和Node.js。
    • 在生产环境中,使用Nitro将您的应用程序和服务器构建到一个通用.output目录中。
      • Nitrol服务引擎提供了跨平台部署的支持,包括Node、Deno、Serverless、.Workers等平台上部署。

通用渲染(服务器端渲染和水合) - SSR
仅客户端渲染(SPA) - CSR
全静态站点生成 - SSG
混合渲染(每条路由缓存策略)- SSR+CSR+SSG

搭建项目

搭建项目:nuxt getting-started

在这里插入图片描述

默认情况下,App.vue 是 Nuxt 的全局入口文件,常用于:

  • 定义页面布局Layout或自定义布局,如:NuxtLayout
  • 定义路由的占位,如:NuxtPage
  • 编写全局样式
  • 全局监听路由等等

在这里插入图片描述

在这里插入图片描述

标签:渲染,SSR,初识,SSG,Nuxt,目录,路由,CSR
From: https://blog.csdn.net/XiugongHao/article/details/140885564

相关文章

  • idea忽略.class、.idea文件和target目录,以及爆红jar包无法加载修复
    一、添加忽略文件的地方首先打开设置,然后找到下面这个位置然后添加对应类型(千万别添加.class,否则和我一样踩坑,方法二可恢复)。整个项目会重新加载二、修复jar包爆红然后整个项目全部爆红,是因为你忽略了.class,你删除刚才新增的忽略.class,然后修改下面这个地方。加......
  • Linux系统目录结构
    最顶层为跟目录(/)-Unix/Linux的基本哲学理念:一切皆文件-倒挂的树形结构目录说明/处于Linux文件系统树形结构的最顶端,它是Linux文件系统的入口。所有的目录、文件、设备都在/之下,它是Linux文件系统最顶层的唯一的目录;一般建议在根目录下面只有目录,不要直接存放文件;/bin......
  • 1-1 初识C语言
    初识C语言:C语言主要特点:有32个关键字,9种控制语句,34种运算符;数据类型有:整形,浮点型,字符型,数组类型,指针类型,结构体类型,共用体类型等,能实现各种复杂的数据结构(如链表,树,栈等)的运算,尤其是指针类型数据,使用十分灵活;具有结构化的控制语句(如if•••else语句.whil......
  • 易优CMS模板目录各文件说明
    一般网站模板默认统一保存在template目录下面的PC目录里面templatePC---电脑端mobie---移动(app)端/PC目录介绍-/skin--目录为存放样式、JS、网站基础图片等。包括:--/css--样式.css文件目录--/JS--JS动态文件......
  • 【Nuxt】服务端渲染 SSR
    SSR概述服务器端渲染全称是:ServerSideRender,在服务器端渲染页面,并将渲染好HTML返回给浏览器呈现。SSR应用的页面是在服务端渲染的,用户每请求一个SSR页面都会先在服务端进行渲染,然后将渲染好的页面,返回给浏览器呈现。构建SSR应用常见的库和框架有:VueNuxt,ReactNext......
  • 测试 pkg - 无法访问目录之外的 pkg
    我正在尝试学习如何创建pkg和测试。我研究发现,为了测试,您创建一个单独的文件夹power_decos/├──pytest_cache/├──venve/├──装饰器/│├──|||init.py│├──装饰器1.py|├──装饰器2.py├──测试/├──in......
  • 初识RestAssured
    1、接口测试的本质不在于创造,在别人写好的情况下去调用--发起请求,校验结果2、接口测试的四要素URL地址请求方式请求参数返回值3、RestAssured介绍RestAssured的依赖导入点击查看代码<dependencies><!--Rest-Assured核心库--><dependency>......
  • Pytest 找不到我的设置目录
    我尝试启动pytest,但pytest找不到设置文件我在virtualenv中Python3.11.9和pytest8.3.2ImportError:Nomodulenamed'drf.settings'pytest-djangocouldnotfindaDjangoproject(nomanage.pyfilecouldbefound).Youmustexplicitlyadd......
  • MySQL:初识数据库&初识SQL&创建数据库
    目录1、初识数据库1.1什么是数据库1.2 什么是MySQL2、数据库2.1 数据库服务&数据库2.2C/S架构3、初识SQL3.1什么是SQL3.2 SQL分类 4、使用SQL4.1查看所有数据库4.1.2语句解析 4.2创建数据库4.2.1 ifnotexists校验 4.2.2手动明确字符集和排序规......
  • Linux路径的概念及目录的操作命令 cd、pwd、mkdir、rmdir
    本文主要介绍Linux系统中路径的基本概念以及对目录的基础操作。根目录的概念在Windows操作系统中,是由盘符开始描述路径,如:C:\Programs\abc\或者D:\game\abc\。在Linux操作系统中,则是以目录树的形式展现,所有的文件及目录都是从根目录/开始的,如/home,/etc等,即便是有多......