历时两个月！Nuxt3从入门到实战！你值得收藏！

前言

大家好，我是村长，下面这篇长文是我历时1个多月做的Nuxt3学习成果的输出，由于精力和水平有限，难免有错漏，欢迎大家指正。后续我还有继续更新该系列的计划和想法，希望大家多多点赞支持一下，谢谢各位朋友啦！ 欢迎关注我的公众号「村长学前端」，新视频和文章会第一时间在公众号发送，另外大家可以输入“加群”和200+前端大咖讨论学习！

小右13号在微博给Nuxt 3带货了：

23号的直播分享再一次给Nuxt 3带货，这次独占一页PPT：

看来这个Nuxt3一定不简单！那这个框架是做啥的呢？村长就带大家来一探究竟！

字面意思看是一款基于Vue3的混合开发框架。

那什么是混合（Hybrid）开发呢？继续看官方介绍，Hybrid状态还是soon，表示增量的静态生成ISG以及一些其他可能的高级模式，静态生成Nuxt2就有，但是每次都全量更新整个网站肯定是不好的，这个增量更新真的值得期待！下面的很多新特性：整合vite + vue3 + composition api + ts、CLI、DevTools、Nuxt Kit表明，这是一个体系完备的通用开发框架，能提供良好的代码组织、极高的开发效率、开发体验和服务端渲染/静态网站生成（SSR/SSG）能力，这才是硬核！

配套视频

我专门录制了Nuxt3从入门到实战系列视频，爱看视频学习的小伙伴千万不要错过！

space.bilibili.com/480140591/c…

尝鲜Nuxt3，尤雨溪力荐的框架怎么样？

创建项目

打开 Visual Studio Code , 打开内置终端并输入下面命令创建一个nuxt项目：

npx nuxi init nuxt3-app

踩坑指南：node版本需要高于v14.16.0

安装依赖

yarn install

启动

使用 yarn dev以 开发模式启动nuxt:

yarn dev

✨浏览器会自动打开：http://localhost:3000

最小应用

在nuxt3中如果没有pages/目录，则表示不会包含vue-router依赖。如果我们不需要路由或者就是一个落地页时就可以这么搞。

下面删除app.vue中<NuxtWelcome />，随便添点内容看看效果：

<template>
  <div>
    <h1>nuxt3 app</h1>
  </div>
</template>

下面我们加个页面试试，创建layouts/index.vue：

<template>
  <div>index page</div>
</template>

别忘了添加路由出口，app.vue：

<template>
  <div>
    <h1>nuxt3 app</h1>
    <!-- 路由出口 -->
    <NuxtPage></NuxtPage>
  </div>
</template>

那如果我有另一个页面detail.vue想要跳转过去哪？

可以像下面这样，添加一个NuxtLink，index.vue：

<template>
  <div>index page</div>
  <!--跳转链接-->
  <NuxtLink to="/detail">Detail Page</NuxtLink>
</template>

现在可以自由的跳转了！

这个约定路由用起来可太方便了，但是大家需要知道很多规则才能用好，比如：

• 嵌套路由怎么搞？
• 动态路由怎么搞？

等等问题，下面让村长给大家一一道来！快给我点个赞吧，这会让我更新的更快！