一、关于Nuxt.js
Nuxt.js是一个基于Vue.js的服务端渲染（SSR）框架，它允许开发者利用Vue.js构建出高性能、SEO友好、可扩展的Web应用程序。相较于前代Nuxt 2，Nuxt3是一个全新的版本，重写了很多核心代码部分并增加了新的功能。
Nuxt3的一些主要特性包括：
- 基于Vite的构建系统：这使得开发者可以获得更快的开发和构建速度。
- 改进的路由系统：支持动态路由和嵌套路由，提供了更好的路由配置选项。
- 改进的数据获取：支持在页面级别和组件级别获取数据，提供了更好的数据获取选项。
- 新的插件系统：让开发者可以更轻松地添加和管理插件。
- 新的配置系统：提供了更好的配置选项和更好的默认设置。
二、模板渲染
模板渲染是一个在软件开发中常见的概念，它涉及从后端获取数据后，按照一定规则将数据加载到预定义的模板中，最终输出成浏览器中显示的HTML或其他格式的内容。
根据模板渲染的的时机，可以分为以下两种：
- 服务端渲染：服务端查询数据库相关数据，然后通过JSP、Thymeleaf等服务端渲染的方式，将数据和模板拼接，形成HTML文件，最后响应给浏览器进行解析并展示页面内容。
- 客户端渲染：主要依赖浏览器来完成页面的渲染工作。客户端首次请求，服务器返回的HTML页面通常只包含一些基础的结构和占位符，然后通过JavaScript框架（如Vue.js、React等）在客户端动态地加载和解析数据，生成最终的页面内容。
两种渲染方式的优劣：
- 服务端渲染：
- 优点：
- 首屏加载速度快：因为服务端返回的是一个渲染好的页面，浏览器直接解析。
- 有利于SEO优化：服务端返回完整的HTML页面，使得搜索引擎爬虫能抓取到页面有价值的内容，从而提高网站的搜索排名。
- 缺点：
- 服务器压力增大：每一个请求都需要服务器进行处理和渲染。
- 不利于前后端分离：服务端渲染需要前端参与模板的编写和维护，降低了前后端的分离程度，增加了协作的复杂性。
- 优点：
- 客户端渲染：
- 优点：
- 提升用户体验：客户端渲染可以实现更丰富的交互效果和动态内容。
- 减轻服务器压力：客户端渲染将部分计算任务转移到了浏览器端，减少了服务器的处理负担
- 前后端分离：前端专注于页面的展示和交互，后端专注于提供数据和API接口，使得开发过程更加独立和高效。
- 缺点：
- 首屏加载速度慢：需要等待JavaScript在客户端执行完成才能看到渲染好的页面。
- 不利于SEO：搜索引擎爬虫可能无法很好地理解JavaScript动态生成的页面内容，影响网站的搜索排名。
- 优点：
三、同构渲染
同构渲染（也称为通用渲染）是一种现代web开发技术，它结合了服务器端渲染（SSR）和客户端渲染（CSR）的优点。在同构渲染中，首次页面加载时的HTML是在服务器上生成的，然后在客户端上通过JavaScript增强，提供动态的交互性。这种方法旨在提高应用程序的性能和搜索引擎优化（SEO），同时保持丰富的用户体验。
四、创建Nuxt3项目
-
方式一
npx nuxi@latest init <project-name>因为网络问题，这种方式创建项目容易报错
-
方式二
- 直接克隆代码
git clone -b v3 https://github.com/nuxt/starter.git- 进入目录，安装依赖
cd starter npm i- 启动项目
npm run dev- 目录结构
-
方式三
- 使用npm初始化项目
mkdir nuxt_demo01 cd nuxt_demo01 npm init -y- 下载nuxt
npm i nuxt- 目录结构
- 创建配置文件
nuxt.config.ts
import { defineNuxtConfig } from "nuxt/config" export default defineNuxtConfig({})- 创建配置文件
tsconfig.json
{ "extends": "./.nuxt/tsconfig.json" }此处不用处理
- 在
package.json添加启动脚本命令
{ ... "scripts": { "dev": "nuxi dev" }, ... }- 启动项目
npm run dev启动项目后，会自动创建.next文件夹，
tsconfig.json的错误提示就没有了