本文轉(zhuǎn)載自微信公眾號「村長學(xué)前端」，作者前端楊村長 。轉(zhuǎn)載本文請聯(lián)系村長學(xué)前端公眾號。

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

23號的直播分享再一次給Nuxt 3帶貨，這次獨占一頁P(yáng)PT：

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

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

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

正式使用

創(chuàng)建項目

打開 Visual Studio Code , 打開內(nèi)置終端并輸入下面命令創(chuàng)建一個nuxt項目：

npx nuxi init nuxt3-app 

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

安裝依賴

yarn install 

啟動

使用 yarn dev以 開發(fā)模式啟動nuxt:

yarn dev 

瀏覽器會自動打開：http://localhost:3000

最小應(yīng)用

在nuxt3中如果沒有pages/目錄，則表示不會包含vue-router依賴。如果我們不需要路由或者就是一個落地頁時就可以這么搞。

下面刪除app.vue中，隨便添點內(nèi)容看看效果：

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

下面我們加個頁面試試，創(chuàng)建layouts/index.vue：

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

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

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

那如果我有另一個頁面detail.vue想要跳轉(zhuǎn)過去哪?

可以像下面這樣，添加一個NuxtLink，index.vue：

<template> 
  <div>index page</div> 
  <!--跳轉(zhuǎn)鏈接--> 
    <NuxtLink to="/detail">Detail Page</NuxtLink> 
</template> 

現(xiàn)在可以自由的跳轉(zhuǎn)了!

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