# Nuxt基础知识以及SSR+CSR配置

**Repository Path**: fxym888/nuxt-test

## Basic Information

- **Project Name**: Nuxt基础知识以及SSR+CSR配置
- **Description**: Nuxt基础知识以及SSR+CSR配置
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-03-20
- **Last Updated**: 2023-03-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 01. Nuxt3简介和环境搭建
## Nuxt3的简介
<br />Nuxt3是基于Vue3发布的SSR框架，也是Vue全家桶系列的一员。如果你了解Nuxt2，应该也了解Nuxt3的使命和用途。但是如果你不了解，你需要先知道两个概念。

<br />SPA应用：也就是单页应用，这些多是在客户端的应用，不能进行SEO优化（搜索引擎优化）。

<br />SSR应用：在服务端进行渲染，渲染完成后返回给客户端，每个页面有独立的URL，对SEO友好。

<br />所以如果你开发的应用是企业网站、商品展示 、博客这类型的展示型网站，就需要使用搜索引擎喜欢的SSR应用。当我们明白这两个概念后，再来看Nuxt3的使命。因为Vue开发的应用默认是单页应用（SPA应用），但如果你想针对于搜索优化，就需要使用Vue的SSR模式开发，而Nuxt3就是Vue的SSR开发的框架。

## Nuxt3 的安装
打开内置终端并输入下面命令创建一个nuxt项目：

```js
npx nuxi init nuxt3-test-app
```
<br />这里大概率会失败！
<br />这里大概率会失败！
<br />这里大概率会失败！
<br />这里大概率会失败！
<br />需要改ipv4网络协议配置DNS:114.114.114.114
<br />需要改ipv4网络协议配置DNS:114.114.114.114
<br />需要改ipv4网络协议配置DNS:114.114.114.114
<br />需要改ipv4网络协议配置DNS:114.114.114.114
<br />node版本要大于16！！！
<br />node版本要大于16！！！
<br />node版本要大于16！！！
<br />node版本要大于16！！！

运行
```js
npm run dev


// 成功示例

Nuxi 3.3.1
Nuxt 3.3.1 with Nitro 2.3.1

  > Local:    http://localhost:3000/
  > Network:  http://192.168.163.1:3000/
  > Network:  http://192.168.192.1:3000/
  > Network:  http://192.168.31.195:3000/

i Vite client warmed up in 1820ms
√ Nitro built in 611 ms
√ Vite server hmr 15 files in 787.215ms
```
打开网址如图：
![Image text](./readmeImg/1.png)


## Nuxt3的优势介绍
+ 更轻量：以现代浏览器为基础的情况下，服务器部署和客户端产物最多减小75倍。

+ 更快：用动态服务端代码来优化冷启动。

+ Hybird：增量动态生成和其他高级模式现在都成为可能。

+ Suspense: 导航前后可在任何组件中获取数据。

+ Composition API : 使用Composition API 和 Nuxt3的composables 实现真正的可复用性。

+ Nuxt CLI ： 权限的零依赖体验，助你轻松搭建项目和集成模块。

+ Nuxt Devtools ：专属调试工具，更多的信息和快速修复，在浏览器中高效工作。

+ Nuxt Kit ：全新的基于 TypeScript 和跨版本兼容的模块开发。

+ Webpack5 ： 更快的构建速度和更小的构建包，并且零配置。

+ Vite：用Vite作为你的打包器，体验轻量级的快速HMR。

+ Vue3 ： 完全支持Vue3语法，这一点特别关键。

+ TypeScript：由原生TypeScript和ESM构成，没有额外配置步骤。


# 02. Nuxt3的基础目录结构
默认目录
```js
- .nuxt               // 自动生成的目录，用于展示结果
- node_modules        // 项目依赖包存放目录
- .gitignore          // Git的配置目录，比如一些文件不用Git管理就可以在这个文件中配置
- app.vue             // 项目入口文件，你可以在这里配置路由的出口
- nuxt.config.ts      // nuxt项目的配置文件 ，这个里边可以配置Nuxt项目的方法面面
- package-lock.json   // 锁定安装时包的版本，以保证其他人在 npm install时和你保持一致
- package.json        // 包的配置文件和项目的启动调式命令配置
- README.md           // 项目的说明文件
- tsconfig.json       // TypeScript的配置文件
```
新建常用自定义目录
```js
- pages               // 开发的页面目录
- components          // 组件目录
- assets              // 静态资源目录
- layouts             // 项目布局目录
```

## Hellow World
新建component/hellowWorld.vue，这里用vue3语法写
```html
<template>
  <div class="">
    <h1>Hello World</h1>
  </div>
</template>

<script setup>
import {} from "vue";
</script>

<style scoped></style>
```
App.vue，文件中直接写入这个 HelloWorld组件.
```html
<template>
  <div>
    <hello-world />
  </div>
</template>
```
![Image text](./readmeImg/2.png)

# 03. Nuxt3页面和约定路由的使用
我们按照框架约定新建一个pages 的文件夹，然后新建一个文件Demo1.vue 。注意，上面这两个步骤，就是约定开发，你必须这么作，否则框架就不认为你是一个页面
pages/demo1.vue
```html
<template>
    <div class="text">
        <h1>demo1</h1>
    </div>
</template>

<script setup></script>

<style scoped></style>
```



## 约定路由
当一个页面建立好以后，如何能访问到这个页面 ? 也是一个不能忽视的问题。既然是约定开发，肯定是有一个约定的。 首先第一步，我们需要在项目根目录下的app.vue文件中，使用 <Nuxtpage> 标签，这就相当于路由的出口了。

App.vue
```html
<template>
  <div>
    <hellow-world />
    <NuxtPage></NuxtPage>
  </div>
</template>
```

比如我们现在这个页面，想要访问到，其实只要在地址栏输入下面的地址就可以了
```url
http://localhost:3000/demo1
```
![Image text](./readmeImg/3.png)
但是如果你使用原来的http://localhost:3000就又访问，会显示404，这时候你可以新建一个 index.vue 页面。这时候在访问http://localhost:3000就可以访问到页面了。
![Image text](./readmeImg/4.png)

```html
<template>
  <div class=""><h1>Index Page</h1></div>
</template>

<script setup>
import {} from "vue";
</script>

<style scoped></style>
```
![Image text](./readmeImg/5.png)


## NuxtLink标签的使用
index.vue
```html
<template>
  <div class="">
    <h1>Index Page</h1>
    <NuxtLink to="/demo1">去demo1页面</NuxtLink>
  </div>
</template>
```
![Image text](./readmeImg/6.png)


# 04. Nuxt3动态路由的使用
单参数的传递只要在页面的文件名中用[ ]扩起来就可以了。比如新建一个页面，叫做 demo2-[id].vue
```js
-| pages/
---| index.vue
---| demo2-[id].vue
```
demo2-[id].vue
```html
<template>
  <div class="">获取的id:{{ $route.params.id }}</div>
</template>

<script setup>
import { } from "vue";
</script>

<style scoped></style>
```
我们去首页制作一个链接。
```html
<template>
  <div class="">
    <h1>Index Page</h1>
    <NuxtLink to="/demo1">去demo1页面</NuxtLink><br />
    <NuxtLink to="/demo2-38">去demo2页面</NuxtLink>
  </div>
</template>
```
![Image text](./readmeImg/7.png)
![Image text](./readmeImg/8.png)

## 在script里获取参数
通过useRoute( ) 获得了 route 然后通过ref让template可用,就是vue3语法
```html
<template>
  <div class="">获取的id:{{ id }}</div>
</template>

<script setup>
import { ref } from "vue";
const route = useRoute();
const id = ref(route.params.id);
</script>

```

## 多参数的获取
更改目录结构
```js
-|  pages/
---| index.vue
---| goods-[name]/
-----| demo3-[id].vue
```
去首页制作一个链接。
```html
<template>
  <div class="">
    <h1>Index Page</h1>
    <NuxtLink to="/demo1">去demo1页面</NuxtLink><br />
    <NuxtLink to="/demo2-38">去demo2页面</NuxtLink>
    <NuxtLink to="/goods-商品name1/demo3-38">去demo3页面</NuxtLink>
  </div>
</template>
```
![Image text](./readmeImg/9.png)


# 05.Nuxt3 嵌套路由的使用
嵌套路由就是路由是两级，但是程序员的页面是一个。也就是说有父级页面，也有子集页面。类似我们的页面嵌套。

如何建立一个嵌套路由

嵌套路由的建立非常容易，用一句话解释为：目录和文件名同名，就制作了一个嵌套路由。

制作一个嵌套路由页面一般需要三步：
+ 建立嵌套路由的文件夹（约定大于配置）

+ 创建和文件夹相同名称的文件（父页面）

+ 在新建文件夹下任意创建子页面
```html
|--pages
|----parent/
|-------child.vue
|----parent.vue
```

先在\pages目录下，新建一个文件夹 parent ，然后在pages目录下再建立一个parent.vue的文件。文件建立好之后，编写代码。
```html
<template>
  <div class="">Parent Page</div>
  <!-- 子页面的出口-->
  <NuxtChild></NuxtChild>
</template>

<script setup>
import {} from "vue";
</script>

<style scoped></style>
```
这里的<NuxtChild>就是嵌套路由的出口，所以如果是嵌套路由，就必须要加上这个标签。这是Nuxt的一个内置组件。 有了父页面之后，在新建的parent文件夹下，再建立一个 child.vue子页面。然后编写代码。
```html
<template>
  <div class="">Child Page</div>
</template>

<script setup>
import {} from "vue";
</script>

<style scoped></style>
```
直接到index.uve增加路由链接。
```html
<NuxtLink to="/parent/child">/parent/child</NuxtLink><br />
```



# 06. Nuxt3布局模板
布局模板的作用就是你先定义好一个布局页面，然后提取一些通用的UI或代码到可重用的模板中，提高代码复用性，从而降低代码的复杂度，让代码重用性提高

## 创建布局模板和使用模板
比如现在新建一个文件夹\layouts然后再里边写编写一个 default.vue文件，代码如下。
```html
<template>
  <div>
    我是布局模板，default.vue
    <slot />
  </div>
</template>
```
app.vue
```html
<template>
  <NuxtLayout name="default">
    <div>
      <hello-world />
      <NuxtPage></NuxtPage>
    </div>
  </NuxtLayout>
</template>
```

## 增加多个插槽
修改default.vue布局模板，增加第二个插槽，一个叫做one，一个叫做two。
```html
<template>
  <div>
    <slot>
      我是布局模板，default.vue
      <slot name="one"></slot>
      <slot name="two"></slot>
    </slot>
  </div>
</template>
```
这样编写，一个模板中就有了两个插槽，你可以在页面中通过<template #xxx>的形式来指定对应的模板插槽。 在index.vue中使用多个 <template> 配合模板实现多插槽。
```html
<template>
  <NuxtLayout name="default">
    <template #one>
      <div class="">
        <h1>Index Page</h1>
        <NuxtLink to="/demo1">Demo1.vue</NuxtLink> <br />
        <NuxtLink to="/goods-jspang/demo2-38">Demo2.vue</NuxtLink><br />
        <NuxtLink to="/parent/child">/parent/child</NuxtLink><br />
        <NuxtLink to="/parent/two">/parent/two</NuxtLink><br />
      </div>
    </template>
    <template #two> 我是two中的内容 </template>
  </NuxtLayout>
</template>
```
![Image text](./readmeImg/10.png)

# 07.Nuxt3中的数据请求
Nuxt3中提供了四种方法：useAsyncData 、useFetch 、useLazyFetch 、useLazyAsyncData 。提供的四个方法

## useAsyncData的使用
这个方法的一个特点是，它可以进行很多选项的配置，但是在真实开发中，其实我们用的不多。最常用的就是lazy 选项，比如我们设置成true 就是需要数据都返回后，才会显示出来 ，简单说就是会阻塞页面。默认是false。 比如要设置lazy为true，就可以这样写。因为我们的数据太少，所以基本看不出来效果。

详细配置https://v3.nuxtjs.org/api/composables/use-async-data
```js
const res = await useAsyncData("getList", () =>
  $fetch("http://121.36.81.61:8000/getTenArticleList")
);
console.log(res);




const res = await useAsyncData(
  "getList",
  () => $fetch("http://121.36.81.61:8000/getTenArticleList"),
  {
    lazy: true,
  }
);
```

## useFetch的使用
useFetch 可以理解为所有的都选择默认配置的useAsyncData 方法。比如还是上面的请求，我们就可以写成下面的形式。
```js
const res = await useFetch("http://121.36.81.61:8000/getTenArticleList");


const res = await useFetch("http://121.36.81.61:8000/getTenArticleList", {
  method: "get",
  id: 1,
});
```
## vite跨域配置
nuxt.config.ts
```js
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    // vite配置
    vite: {
        server: {
            // proxy: {
            //     '/api': {
            //         target: 'http://localhost:9999',  //这里是接口地址
            //         changeOrigin: true
            //     }
            // }
        }
    }
})

```

# 08.Nuxt3 middleware路由中间件
Nuxt3提供了路由中间件的概念，你可以在整个应用使用它，目的是在导航到某一个页面之前，执行一些代码。最常见的路由守卫就可以用这个实现。

## 中间件的基本格式
新建一个middleware的文件夹，然后在文件下边新建一个文件default.global.ts 的文件
```js
export default defineNuxtRouteMiddleware((to, from) => {
  console.log("要去那个页面:"+to.path)
  console.log(to)
  console.log("来自那个页面:"+from.path)
  console.log(from)
})
```


## 通过中间件 设置路由守卫
比如我们要访问的页面是`http://localhost:3000/demo1`，现在设置路由守卫，不允许访问，而是跳回到首页。那代码就可以写成下面的样子。

```js
export default defineNuxtRouteMiddleware((to, from) => {
  if (to.path === '/demo1') {
     console.log('禁止访问这个页面')
     abortNavigation()  //停止当前导航，可以使用error进行报错
     return  navigateTo('/')
  }
})
```


## 只对一个页面起作用,类似独享守卫
上面都是对所有路由起作用的，如果只想中间件对一个特殊页面起作用，也是可以的。只要去掉.global的后缀就是可以的。 在middleware 文件夹下，新建一个页面，default.ts，并编写下面的代码。
```js
export default defineNuxtRouteMiddleware((to, from) => {
  console.log("Hello---独享守卫")

})
```
demoSelf.vue
```html
<template>
  <div class="">demoSelf Page</div>
</template>

<script setup>
definePageMeta({
  middleware: ["default"],
  // or middleware: 'auth'
});
</script>

<style scoped></style>
```




# CSR+SSR
## nuxt.config.ts
Nuxt3是支持多种渲染模式，比如：

客户端渲染模式（CSR）： 只需将 ssr 设置为 false
服务器端渲染模式（SSR）：只需将 ssr 设置为 true
混合渲染模式（SSR | CSR | SSG | SWR）：需在 routeRules 根据每个路由动态配置渲染模式（beta版本）
```js
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    
      // ssr: false, // ssr为true就是服务端渲染，false就是客户端渲染
  // 混合渲染（不同路由设置不同渲染模式）
  routeRules: {
    "/": { ssr: true }, // ssr
    "/demo1": { ssr: false }, // spa 应用
    // 3.0.0-12rc -> NetLify
    "/demo2": { static: true }, // 只会在构建时生成一次静态页面
    "/parent": { swr: true }, // 只会生成多次静态页面( 会自动重新验证页面时候需要重新生成 )
  }
})

```