开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 12 天，点击查看活动详情

nuxt3

Nuxt 3 是一个开源框架，可以自动整合了很多东西，另外,nuxt3还是Vue3的同构ssr渲染的使用方案。csr,ssr,srg三种渲染方案三种渲染模式可以参考我的都2023年了，还在用传统的前后端分离？来学习一下CSR,SSR与SRG吧!!! - 掘金 (juejin.cn)这篇文章。

今天我们来具体使用一下Nuxt,来体验一下这非常神奇的Nuxt开发。

初始化项目

我们的host文件配置完之后，就可以成功初始化Nuxt项目了。

我们可以采取官网的方式

npx nuxi init nuxt-app

初始化模板项目。

也可以使用脚手架create-nuxt-app来创建

npx create-nuxt-app <项目名>

这里我们采用官网的方式初始化一个模板项目。

我们 yarn install一下，然后等待依赖下载完毕，我们使用yarn dev启动起来。效果如下:

很漂亮，我们已经启动完毕了，下面我们来上手一下Nuxt

我们在根目录新建一个components目录，然后新建一个demo_1.vue来试试水，先写个组件看看。

<template>
    <h1>
        这是组件一
    </h1>
</template>

<script setup lang="ts"></script>

然后我们在App.vue里试用一下试试。

<template>
  <div>
    <demo_1></demo_1>
  </div>
</template>

我们保存一下，注意Nuxt同样有着热更新的特性我们保存一下，看到了如下效果:

咦，是不是有点不对劲，我们App.vue中也没有引入demo_1.vue组件啊，这咋用的，为啥不报错啊?

我们Nuxt项目是一种约定更重要的项目，只要创建了components目录，目录下的Vue文件都可以作为组件来使用，而且无需导入。

下面我们再介绍一个目录。

我们在根目录下继续创建一个pages目录，然后创建一个pages1.vue文件，输入如下内容。

<template>
    <h1>这是另一个页面</h1>
</template>
<script setup lang="ts"></script>

再创建一个index.vue文件，内容如下:

<template>
    <h1>首页</h1>
</template>
<script setup lang="ts"></script>

再配置一下app.vue文件

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

接下来我们看看效果

这是 /路由下的页面，我们输入http://localhost:3000/pages1

我们在导入pages目录之后是可以自动集成router的。