本文轉載自微信公眾號「村長學前端」，作者前端楊村長 。轉載本文請聯系村長學前端公眾號。

小右13號在微博給Nuxt 3帶貨了：

23號的直播分享再一次給Nuxt 3帶貨，這次獨占一頁PPT：

看來這個Nuxt3一定不簡單!那這個框架是做啥的呢?村長就帶大家來一探究竟!

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

那什么是混合(Hybrid)開發呢?繼續看官方介紹，Hybrid狀態還是soon，表示增量的靜態生成以及一些其他可能的高級模式，靜態生成Nuxt2就有，是一個高逼格的名字還是有其他真貨有待考證???但是不管怎樣，下面的很多特性表明，這是一個體系完備的通用開發框架，它能提供良好的代碼組織和服務端渲染/靜態網站生成(SSR/SSG)能力，這才是硬核!

正式使用

創建項目

打開 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中，隨便添點內容看看效果：

<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> 

現在可以自由的跳轉了!

Young村長的個人空間-嗶哩嗶哩：https://b23.tv/rfg5t64