Nuxt3从入门到实战

Nuxt3从入门到实战

前言

大家好，我是村长，欢迎关注我的公众号村长学前端。最近在与DevUI团队一起做直播，给大家分享Vue DevUI开源组件库的建设，欢迎大家关注我们直播，多给项目star支持一下！

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

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

image-2021102110658127

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

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

image-20211023220905838

那什么是混合（Hybrid）开发呢？继续看官方介绍，Hybrid状态还是soon，表示增量的静态生成以及一些其他可能的高级模式，静态生成Nuxt2就有，是一个高逼格的名字还是有其他真货有待考证😸？但是不管怎样，下面的很多特性表明，这是一个体系完备的通用开发框架，它能提供良好的代码组织和服务端渲染/静态网站生成（SSR/SSG）能力，这才是硬核！

image-20211023221902922

正式使用

创建项目

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

npx nuxi init nuxt3-app

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

安装依赖

yarn install

启动

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

yarn dev

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

image-20211023235415460

最小应用

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

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

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

image-20211024003609545

下面我们加个页面试试，创建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>

现在可以自由的跳转了！

下次预告

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

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

等等，这些我们都会在下一讲中一一道来！快给我点个赞吧，这会让我更新的更快！

写在最后

最近在与DevUI团队一起做直播，给大家分享Vue DevUI如何参与开源建设甚至开发自己的组件库，感兴趣的小伙伴可以观看学习往期回放：

1. 【我要做开源】Vue DevUI开源指南01：提交我的第一次pr
   
2. 【我要做开源】Vue DevUI开源指南02：实现一个能渲染多层节点的Tree组件
   
3. 【我要做开源】Vue DevUI开源指南03：如何给 tree 组件增加展开/收起功能
   
4. 【我要做开源】Vue DevUI开源指南04：使用Vite搭建一个支持TypeScript/JSX的Vue3组件库工程
   
5. 【我要做开源】Vue DevUI开源指南05：给Vue3组件库添加VitePress文档系统
   
6. 【我要做开源】Vue DevUI开源指南06：开源组件库中的CLI脚手架建设，再也不用担心重复工作和代码风格混乱了！
   

【我要做开源】和【nuxt3从入门到实战】这两个系列会一直做下去，欢迎关注村长公众号「村长学前端」加群讨论，获取课件源码，每次直播都会在群内发通知，不错过每一次直播！

原创不易，小伙伴点点下面👇的赞，就是给村长加油了！