【Nuxt】初识 Nuxt 和目录说明

初识 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
  • 编写全局样式
  • 全局监听路由等等
相关推荐
白兰地空瓶44 分钟前
一行 npm init vite,前端工程化的世界就此展开
前端·vue.js·vite
IT教程资源C20 小时前
(N_122)基于springboot,vue网上订餐系统
mysql·vue·前后端分离·网上订餐系统·springboot网上订餐
LYFlied1 天前
【一句话概述】Webpack、Vite、Rollup 核心区别
前端·webpack·node.js·rollup·vite·打包·一句话概述
星光一影1 天前
美容/心理咨询/问诊/法律咨询/牙医预约/线上线下预约/牙医行业通用医疗预约咨询小程序
mysql·小程序·vue·php·uniapp
yuyu_03041 天前
SOHE智能厨余垃圾处理系统
java·vue
Watermelo6171 天前
【前端实战】从 try-catch 回调到链式调用:一种更优雅的 async/await 错误处理方案
前端·javascript·网络·vue.js·算法·vue·用户体验
狼性书生1 天前
uniapp实现的时间范围选择器组件
前端·uni-app·vue·组件·插件
Irene19912 天前
CLI 与 Vite 创建项目对比(附:最优解 create-vue)
vue·vite·cli·项目创建
全栈前端老曹2 天前
【前端权限】 权限变更热更新
前端·javascript·vue·react·ui框架·权限系统·前端权限
今天不要写bug3 天前
基于qrcode前端实现链接转二维码的生成与下载
前端·javascript·typescript·vue