Nuxt3 從入門到實(shí)戰(zhàn)
本文轉(zhuǎn)載自微信公眾號(hào)「村長(zhǎng)學(xué)前端」，作者前端楊村長(zhǎng) 。轉(zhuǎn)載本文請(qǐng)聯(lián)系村長(zhǎng)學(xué)前端公眾號(hào)。
小右13號(hào)在微博給Nuxt 3帶貨了：
23號(hào)的直播分享再一次給Nuxt 3帶貨，這次獨(dú)占一頁P(yáng)PT：
看來這個(gè)Nuxt3一定不簡(jiǎn)單!那這個(gè)框架是做啥的呢?村長(zhǎng)就帶大家來一探究竟!
字面意思看是一款基于Vue3的混合開發(fā)框架。
那什么是混合(Hybrid)開發(fā)呢?繼續(xù)看官方介紹，Hybrid狀態(tài)還是soon，表示增量的靜態(tài)生成以及一些其他可能的高級(jí)模式，靜態(tài)生成Nuxt2就有，是一個(gè)高逼格的名字還是有其他真貨有待考證???但是不管怎樣，下面的很多特性表明，這是一個(gè)體系完備的通用開發(fā)框架，它能提供良好的代碼組織和服務(wù)端渲染/靜態(tài)網(wǎng)站生成(SSR/SSG)能力，這才是硬核!
正式使用
創(chuàng)建項(xiàng)目
打開 Visual Studio Code , 打開內(nèi)置終端并輸入下面命令創(chuàng)建一個(gè)nuxt項(xiàng)目：
- npx nuxi init nuxt3-app
踩坑指南：node版本需要高于v14.16.0
安裝依賴
- yarn install
啟動(dòng)
使用 yarn dev以 開發(fā)模式啟動(dòng)nuxt:
- yarn dev
瀏覽器會(huì)自動(dòng)打開：http://localhost:3000
最小應(yīng)用
在nuxt3中如果沒有pages/目錄，則表示不會(huì)包含vue-router依賴。如果我們不需要路由或者就是一個(gè)落地頁時(shí)就可以這么搞。
下面刪除app.vue中，隨便添點(diǎn)內(nèi)容看看效果：
- <template>
- <div>
- <h1>nuxt3 app</h1>
- </div>
- </template>
下面我們加個(gè)頁面試試，創(chuàng)建layouts/index.vue：
- <template>
- <div>index page</div>
- </template>
別忘了添加路由出口，app.vue：
- <template>
- <div>
- <h1>nuxt3 app</h1>
- <!-- 路由出口 -->
- <NuxtPage></NuxtPage>
- </div>
- </template>
那如果我有另一個(gè)頁面detail.vue想要跳轉(zhuǎn)過去哪?
可以像下面這樣，添加一個(gè)NuxtLink，index.vue：
- <template>
- <div>index page</div>
- <!--跳轉(zhuǎn)鏈接-->
- <NuxtLink to="/detail">Detail Page</NuxtLink>
- </template>
現(xiàn)在可以自由的跳轉(zhuǎn)了!
Young村長(zhǎng)的個(gè)人空間-嗶哩嗶哩：https://b23.tv/rfg5t64
