Nuxt3项目创建

平平丶淡淡 / 2024-03-21 / 原文

一、关于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等）在客户端动态地加载和解析数据，生成最终的页面内容。

两种渲染方式的优劣：

服务端渲染：
- 优点：
  1. 首屏加载速度快：因为服务端返回的是一个渲染好的页面，浏览器直接解析。
  2. 有利于SEO优化：服务端返回完整的HTML页面，使得搜索引擎爬虫能抓取到页面有价值的内容，从而提高网站的搜索排名。
- 缺点：
  1. 服务器压力增大：每一个请求都需要服务器进行处理和渲染。
  2. 不利于前后端分离：服务端渲染需要前端参与模板的编写和维护，降低了前后端的分离程度，增加了协作的复杂性。
客户端渲染：
- 优点：
  1. 提升用户体验：客户端渲染可以实现更丰富的交互效果和动态内容。
  2. 减轻服务器压力：客户端渲染将部分计算任务转移到了浏览器端，减少了服务器的处理负担
  3. 前后端分离：前端专注于页面的展示和交互，后端专注于提供数据和API接口，使得开发过程更加独立和高效。
- 缺点：
  1. 首屏加载速度慢：需要等待JavaScript在客户端执行完成才能看到渲染好的页面。
  2. 不利于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

方式三
1. 使用npm初始化项目
```
mkdir nuxt_demo01

cd nuxt_demo01

npm init -y
```
1. 下载nuxt
```
npm i nuxt
```
1. 目录结构
1. 创建配置文件nuxt.config.ts
```
import { defineNuxtConfig } from "nuxt/config"

export default defineNuxtConfig({})
```
1. 创建配置文件tsconfig.json
```
{
  "extends": "./.nuxt/tsconfig.json"
}
```
此处不用处理
1. 在package.json添加启动脚本命令
```
{
  ...
  "scripts": {
    "dev": "nuxi dev"
  },
  ...
}
```
1. 启动项目
```
npm run dev
```
启动项目后，会自动创建.next文件夹，tsconfig.json的错误提示就没有了