Nuxt3笔记-MLHITRE

文章目录

一，介绍
二，安装
三，Hello world
四，路由
五，布局模板
1. 多个插槽
六，组件
1. 懒加载组件
七，composable
八，数据请求
九，中间件
参考资料：

一，介绍

nuxt.js是一个服务端渲染应用框架。服务端渲染（SSR）的英文是Server-side rendering，意思是在服务器上显示网页直接向客户端浏览器发送一个完全渲染好的页面（说白了就是将html页面文件直接传回来）而不是在浏览器中渲染代码文件。

现在我们一般的SPA(单页应用)都是可以动态地修改局部的页面数据，不像以前那样从服务端获取页面（以前我们可以右键源代码看到渲染的html代码，但是现在的框架下是看不到的）。

而SPA的劣势很明显：

页面加载之前需要加载所有页面需要的JS库，这让首次打开页面所需的时间比较久。
因为源代码看不出啥来，所以搜索引擎爬虫爬不到什么东西，不知道你这个网站是干啥的，不利于搜索引擎搜索到你的网站。
浏览器历史记录的问题。

所以我们需要SSR。我们一般的博客、官网喜欢使用这种方法搭建。

SSR参考文章：https://segmentfault.com/a/1190000041954832

（说实话感觉这个框架首屏加载卡的要死😥）

二，安装

# 创建nuxt3项目，npx命令需要npm版本不低于5.2
npx nuxi init 项目名

注意：如果出现安装失败，参考如下博文https://juejin.cn/post/7166972448536002573

# 安装依赖
# 如果使用pnpm安装，要在根目录创建一个.npmrc文件，写上shamefully-hoist=true
pnpm install

# 启动项目
pnpm run dev

下面的内容基本都是我学技术胖教程的笔记，他的教程挺好的，我自己就是单纯想记下来，有那么个过程，建议去他的网站看教程

目录结构（捡了几个重要的说）：

.nuxt #自动生成的目录，用于展示结果
app.vue #项目入口文件
nuxt.config.ts #nuxt项目的配置文件
tsconfig.ts #TS的配置文件
src #自己创建的源码文件夹，注意里面的这几个文件夹名是固定的，不能瞎起
 - pages #页面文件夹
 - components #组件文件夹
 - assets #静态资源文件夹
 - layouts #布局文件夹

//nuxt.config.ts改一下你在src目录下写代码才能生效
export default defineNuxtConfig({
  srcDir: 'src/',
})

三，Hello world

首先把app.vue放到新建好的src目录下,并且写一个helloworld组件名进去。

<template>
  <div>
    <HelloWorld/> 
  </div>
</template>

其次在components文件夹下新建一个HelloWorld.vue文件。

Nuxt会为我们自动引入components内的组件到你用的地方，所以我们直接写一个组件，然后在app.vue中直接写组件名就行。

<template>
  <div class="">
    <h1>Hello World</h1>
  </div>
</template>

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

<style scoped></style>

四，路由

说一下什么是约定式开发，nuxt就是这种模式，举个例子，他说pages文件夹里放的是页面vue文件，你就必须把页面vue文件放在pages文件夹里，同理components文件夹必须放组件文件夹，这是nuxt开发人员和我们使用者的约定。

先在app.vue里添加NuxtPage标签，pages文件夹下的文件就会显示在该标签位置

<template>
    <div>
        <NuxtPage></NuxtPage>
    </div>
</template>

然后再pages文件夹下新建index.vue文件，这个文件默认是pages的首页。

<template>
    <div>
        <h1>
            我是index首页
        </h1>
    </div>
</template>

NuxtLink跳转路由

Nuxt可以使用to跳转到pages目录下的文件，跳转路径就是文件名。

在pages文件夹下新建page1.vue文件，随便输入点内容。然后修改index.vue文件，修改如下。

<template>
    <div>
        <h1>
            我是index首页
        </h1>
        <NuxtLink to="/page1">去往page1</NuxtLink>
    </div>
</template>

NuxtLink动态路由

就是传参而已。

单参数：文件名改为page2-[id].vue，意思就是传id到page2.vue文件，获取的话使用$route.params.id就行。这里就是传12到page2文件。
```
<NuxtLink to="/page2-12">传id=12到page2</NuxtLink>
```
多参数：给文件外面套个文件夹就行，文件夹后面加上个-[参数名]，就可以传递两个参数。不过感觉也不是很方便，大概Nuxt3也不太支持传递多个参数。

嵌套路由

就是父子组件嵌套在一起，在一个页面里显示出来。创建方法就是父组件建立一个vue文件，然后建立一个相同名字的文件夹，在这个文件夹里新建的vue文件都是子组件。

父组件里设置NuxtPage，不要设置NuxtChild。

<template>
  <div class="">Parent Page</div>
  <!-- 子页面的出口-->
  <NuxtPage></NuxtPage>
</template>

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

<style scoped></style>

如果父组件为parent.vue，子组件为child.vue（这个不用名称不是固定的）

我们在index.vue里就可以设置这个。如果跳转到child2的话，这里的路径child改为child2就行。

<NuxtLink to="/parent/child">/parent/child</NuxtLink><br />

五，布局模板

布局模板就是我们的项目的header栏和footer栏之类的，因为我们不管去往哪个路径都有它，我们习惯把它提取出来放在一个文件夹里（layouts）。

在layouts文件夹里新建default.vue默认文件。在里面写入slot标签，我们其他的内容就是放在slot插槽位置。

<template>
  <div>
    布局模板
    <slot />
  </div>
</template>

在我们想要使用布局的文件里，一般是index.vue里。

<template>
  <NuxtLayout>
    <div>
      <NuxtPage></NuxtPage>
    </div>
  </NuxtLayout>
</template>

多个插槽

<template>
  <div>
    布局模板
    <slot name="one" />
    <slot name="two"/>
  </div>
</template>

在index.vue使用文件里。

<template>
    <NuxtLayout>
        <template #one>xxx</template>
        <template #two>xxx</template>
    </NuxtLayout>
</template>

六，组件

我们的自定义组件必须写在comoponents文件夹里。

文件名就是组件名，我们在pages文件夹vue文件里直接使用即可。（标签一般咱用大驼峰哈）

如果我们想在components文件夹里再新建文件夹，比如新建test文件夹，在这个文件夹里新建一个button文件，我们在pages的vue文件里使用的时候将两者名字组合起来

<TestButton/>

懒加载组件

懒加载就是按需加载，这样性能更好。使用方法就是在原本组件名前面加上lazy就行。

<lazyTestButton v-if="show">

七，composable

上一个components组件是我们的一些组件想要复用时喜欢放在里面，而composable就是我们的一些功能函数、逻辑代码想要复用的时候放在这个文件夹里。

在文件里使用export导出之后在pages的vue文件里直接使用即可，也不用导入。

但是注意如果我们想在composable文件夹里新建文件夹，我们必须将这个文件夹里的文件名换成index.ts，比如composable/test/index.ts。

八，数据请求

不用axios，nuxt提供了四个方法。官网

useAsyncData：异步获取数据，提供配置项

key可以理解为一个名字，用来区别不同的useAsyncData

const  res  = await useAsyncData(key,()=>{
    $fetch(url),{
        配置项，什么请求方法之类的
    }
})

useFetch：上一个的默认版，没有配置项
useLazyAsyncData和useLazyFetch就是上两个的lazy设置为true而已

九，中间件

我们vue常说的路由守卫就是中间件，就是在导航到某个页面的时候执行一些代码。

新建一个middleware文件夹，在文件里新建一个default.global.ts文件，global代表这个中间件是全局的，也就是说每次跳转都会执行这个中间件。

export default defineNuxtRouteMiddleware((to, from) => {
  console.log("要去那个页面:"+to.path)
  console.log("来自那个页面:"+from.path)
})

如果只想对一个页面起作用，新建一个default.ts只要去掉.global就可以，然后到相应页面里注册就行。

<template>
  <div class=""></div>
</template>
<script setup>
definePageMeta({
  middleware: ["default"],
  // or middleware: 'auth'
});
</script>
<style scoped></style>

参考资料：

基本认识一下nuxt3项目搭建：https://juejin.cn/post/7170746000112353293
nuxt3教程（技术胖）：https://jspang.com/article/86#toc0
nuxt3中文文档：https://57code.github.io/nuxt3-docs-zh/
nuxt3官网：https://nuxt.com/ 我们可以在modules模块看有哪些可以用的库。
naiveUI的nuxt插件版：https://github.com/Baiyuetribe/nuxt3-naive-ui-starter

李致知

Nuxt3笔记