Nuxt3從入門到實(shí)戰(zhàn)
前言
尤大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
[圖片上傳失敗...(image-f398f0-1680708709311)]image-20211023235415460
最小應(yīng)用
在nuxt3中如果沒有pages/目錄，則表示不會(huì)包含vue-router依賴。如果我們不需要路由或者就是一個(gè)落地頁時(shí)就可以這么搞。
下面刪除app.vue中<NuxtWelcome />，隨便添點(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)了！
下次預(yù)告
這個(gè)約定路由用起來可太方便了，但是大家需要知道很多規(guī)則才能用好，比如：
- 嵌套路由怎么搞？
- 動(dòng)態(tài)路由怎么搞？
等等，這些我們都會(huì)在下一講中一一道來！快給我點(diǎn)個(gè)贊吧，這會(huì)讓我更新的更快！
寫在最后
最近在與DevUI團(tuán)隊(duì)一起做直播，給大家分享Vue DevUI如何參與開源建設(shè)甚至開發(fā)自己的組件庫(kù)，感興趣的小伙伴可以觀看學(xué)習(xí)往期回放：
- 【我要做開源】Vue DevUI開源指南01：提交我的第一次pr
- 【我要做開源】Vue DevUI開源指南02：實(shí)現(xiàn)一個(gè)能渲染多層節(jié)點(diǎn)的Tree組件
- 【我要做開源】Vue DevUI開源指南03：如何給 tree 組件增加展開/收起功能
- 【我要做開源】Vue DevUI開源指南04：使用Vite搭建一個(gè)支持TypeScript/JSX的Vue3組件庫(kù)工程
- 【我要做開源】Vue DevUI開源指南05：給Vue3組件庫(kù)添加VitePress文檔系統(tǒng)
- 【我要做開源】Vue DevUI開源指南06：開源組件庫(kù)中的CLI腳手架建設(shè)，再也不用擔(dān)心重復(fù)工作和代碼風(fēng)格混亂了！
