Nuxt3正式版釋出，教你用vite+nuxt+pinia+vueuse搞定前端SSR專案
theme: cyanosis
宣告：文章為稀土掘金技術社群首發簽約文章，14天內禁止轉載，14天后未獲授權禁止轉載，侵權必究！
前言
大家好，我是易師傅，一個專門搞前端的搬（touch）磚（fish）師傅 ~
翹首期盼，終於終於，穩定版的 Nuxt3 它來了，它帶著六親不認的步伐走過來了 ~
11 月 16 日，全球最大的 Nuxt 會議 Nuxt Nation 2022 線上舉行，並正式釋出了 Nuxt.js 3.0 的第一個穩定版本。
Nuxt3 是基於 Vite、Vue3 和 Nitro 的 Nuxt 框架的重構，具有一流的 Typescript 支援，且這次更新對核心進行了精簡，使之速度更快，體驗更好。
一、瞭解 SSR
在介紹 Nuxt3 之前，肯定要先介紹一波 服務端渲染，畢竟 Nuxt 就是一個基於 Vue.js 的服務端渲染應用框架；
什麼是 SSR
伺服器端渲染（Server-Side Rendering）是指由服務端完成頁面的 HTML 結構拼接的頁面處理技術，傳送到瀏覽器，然後為其繫結狀態與事件，成為完全可互動頁面的過程。
簡單理解就是html是由服務端寫出，可以動態改變頁面內容，即所謂的動態頁面。早年的 php、asp 、jsp 這些 Server page 都是 SSR 的。
為什麼使用 SSR
- 網頁內容在伺服器端渲染完成，一次性傳輸到瀏覽器，所以
首屏載入速度非常快； 有利於SEO，因為伺服器返回的是一個完整的 html，在瀏覽器可以看到完整的 dom，對於爬蟲、百度搜索等引擎就比較友好；
二、Nuxt 3
苦於在 Nuxt3.0 RC 版本中的不穩定等等一系列問題，現在它終於穩定的釋出了 ~
Nuxt 是一個基於 Vue.js 的服務端渲染應用框架，如同 next 對於 react 一般；
更新 API 穩定性
Nuxt 3 帶有穩定的、生產就緒的 API 和 50 多個由社群和 Nuxt 團隊使用 Nuxt Kit 構建的支援模組。
瀏覽器和 Node.js 支援
瀏覽器支援：Nuxt 3 官方僅支援長期自動更新的瀏覽器，且更新過程不需要使用者的干預，例如 Chrome、Firefox、Safari 等。
服務端支援：Nuxt 3 目前支援 Node.js 14、16、18 和 19。Nuxt.js 團隊鼓勵大家使用 Node.js 的最新 LTS 版本，一旦它們被主要部署平臺廣泛採用，Nuxt.js 團隊就會將其推送。由於 14.x 即將結束支援，強烈建議更新到最新的 18.x 版本。
新特性包括：
- 更輕量：以現代瀏覽器為目標的伺服器部署和客戶端產物最多可縮小 75 倍
- 更快：基於 nitro 提供動態程式碼分割能力，以優化冷啟動效能
- Hybrid：增量靜態生成和其他的高階功能現在都成為可能
- Suspense：在任意元件和導航前後都可以獲取資料
- Composition API：使用 Composition API 和 Nuxt 3 的 composables 實現真正的程式碼複用
- Nuxt CLI：沒有任何依賴，幫你輕鬆搭建專案和整合模組
- Nuxt Devtools：通過直接在瀏覽器中檢視資訊和快速修復實現更快地工作
- Nuxt Kit：具有 Typescript 和跨版本相容性的全新模組開發
- Webpack 5：更快的構建時間和更小的包大小，無需配置
- Vite：使用 Vite 作為打包工具，體驗閃電般快速的 HMR
- Vue 3：Vue 3 是你下一個 Web 應用程式的堅實基礎
- TypeScript：使用原生 TypeScript 和 ESM 構建，無需額外步驟
更多新特性見官網文件
專案模板快速檢視
三、初始化專案
- Nodejs >= 16.11
- pnpm >= 7.x
1.初始化：
npx nuxi init first-nuxt-app
2.安裝依賴 ``` cd first-nuxt-app
yarn
yarn install
npm
npm install
pnpm
pnpm install ```
注意： 如果你用 pnpm 安裝依賴，請建立一個 .npmrc 檔案，且設定:
shamefully-hoist=true
再使用 pnpm 安裝
pnpm install
3. 執行
pnpm run dev
4. 訪問
開啟本地連結 http://localhost:3000/ 就可以開始訪問了
Q： 啊，這也太簡單了吧，那是不是就代表結束了，那我們就開始研發吧！
A： 好像是的，一時之間我竟然語塞，畢竟可以正常開啟訪問了 ~
5.思考：
我們看看倉庫程式碼（如下圖）
發現倉庫程式碼啥都沒有，就一個 app.vue，身為一個前端 er，一看這跟我們常見的前端框架目錄架構不一樣啊！
這不是在跟我開玩笑嗎？
別急嘛，您接著往下看 ~
四、配置 eslint + prettier + husky + commitlint
eslint + prettier：程式碼質量 與 程式碼風格 是我們必須要做的項任務，正所謂沒有規矩不成方圓；
husky + commitlint：git hooks 和 提交檢測 我們也是必須要整合的；
這樣子的配置我之前文章講過許多，感興趣的可以參考我之前文章 《手把手教你用 vite + vue3 + ts + pinia + vueuse 打造企業級前端專案》和《非大廠的我們，如何去搞Vue/React Hooks和Utils的企業開源工具庫？》
關於為什麼要有他們，如果你還有疑問，可以看看我的上一篇文章《前端規範都有哪些》的介紹；
五、新建常用目錄
我們剛剛講了，發現整個倉庫就一個 app.vue，那麼我們當然不能將就他啊，肯定是要折騰一番呀 ~
1. 新建 app(src) 目錄
mkdir src
並且把 app.vue 檔案移入到 src 目錄下
同時修改配置檔案 nuxt.config.ts：
ts
// http://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
srcDir: 'src/',
})
再 pnpm dev 執行，發現跟上面初始化的一樣
2. 配置頁面路由目錄：pages
1.新建 src/pages 目錄：
mkdir src/pages
2. 新建 src/pages/index.vue 首頁：
touch src/pages/index.vue
3. 配置 src/pages/index.vue
``` ```
4. 修改 src/app.vue 入口
```
```
5. 再 pnpm dev 執行
大家再不煩想一下：到這裡如果你想配置一個列表頁或者詳細頁，應該怎麼去做呢？
3. 新增多個頁面靜態路由
正如上面所問的，如何去配置一個 列表頁 或者 詳細頁；
其實配置方法很簡單，和上面的 src/pages/index.vue 首頁類似；
下面我們以 列表頁 為例：
1.新建 src/pages/list.vue 檔案：
```
```
2. 在 src/pages/index.vue 配置路由跳轉
``` ``` 3. 預覽
<NuxtLink> 是 Vue Router 中 <RouterLink> 元件和 HTM L<a> 標籤的替代品；
關於 NuxtLink 的更多使用，可參考官方文件
根據上面的
src/pages/list.vue檔案，我們可以得知頁面中http://localhost:3000/list就對應了這個檔案，所以如果把list.vue換成detail.vue，路由地址就是http://localhost:3000/detail了；這就代表的這個頁面的靜態路由了 ~
4. 新增多個頁面動態路由
動態路由 顧名思義就是這個路由地址是可變的，是動態的；
使用場景一般就是文章的詳細頁，因為一般一篇文章會有對應的一個 id，那這個 id 就是動態的；
那如何去實現呢？
1. 新建 src/pages/[id] 目錄（目錄名一定要是 [id]）：
mkdir src/pages/[id]
2. 新建 src/pages/[id]/index.vue 檔案：
```
``
**3. 頁面中訪問：http://localhost:3000/[id]`**
其中 [id] 是一個動態的數字，可以是 http://localhost:3000/111，也可以是 http://localhost:3000/222；
5. 新增 layouts 模板
熟悉 php 開發或者 jsp 的同學，肯定都會知道 服務端渲染 會有一個通用模板目錄，在 nuxt3 中也有，其目錄名叫 layouts
像一般通用的模板，例如 頭部 header 與 底部 footer 之類的，也有一些較為通用的通用模板；
可能有些同學會問，這不就是一個公共元件嗎，幹嘛非得叫 layouts 模板；
額... 其實你這麼想也沒錯，但是不過他們還是有一些使用和渲染上的差異；
1. 新建 src/layouts 目錄
2. 新建 src/layouts/default.vue 預設檔案
```
**3. 在全域性頁面中配置： `src/app.vue`（也就是每個頁面中都會有該模板）**
```
這樣你無論開啟哪個頁面都會存在該模板了；
4. 自定義模板（類似 header、footer）
新建 src/layouts/header.vue
```
```
5. 使用自定義模板 ``` ```
6. 預覽
六、配置元件 components
熟悉 vue 或者 react 的同學，對元件一定不陌生，在 nuxt3 同樣集成了元件 components；
只是在 Nuxt3 中會自動匯入您 components/ 目錄中的所有元件，也就是說當你想使用元件時，不要 import 了，直接使用即可；
1. 元件的使用指南
1. 新建 src/components 目錄
2. 新建 src/components/ListItem.vue 檔案
```
**3. 在 `src/pages/list.vue` 檔案中使用**
```
根據程式碼，我們看到我們並沒有用
import去匯入ListItem.vue，還是正常的渲染了；
4. components 巢狀目錄元件使用
如果您在巢狀目錄中有一個元件，例如：
components/
--| list/
----| detail/
------| Button.vue
那麼我們可以直接在其它地方使用：
<ListDetailButton />
2. \ 元件
Nuxt 提供了 <ClientOnly> 專門用於僅在客戶端渲染元件的元件；
要僅在客戶端匯入元件，請在僅客戶端外掛中註冊該元件。
```
```
七、配置外掛 plugins
Nuxt 會自動讀取 plugins 目錄中的檔案並在建立 Vue 應用程式時載入它們；
你可以在檔名中使用 .server 或 .client 字尾來讓外掛在 伺服器端 或 客戶端 載入外掛；
1. 新建 src/plugins 目錄
2. 以 vue 指令為例：新建 src/plugins/directives.ts 檔案
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.directive('focus', {
mounted (el) {
el.focus()
},
getSSRProps (binding, vnode) {
// you can provide SSR-specific props here
return {}
}
})
})
當然還有其它許多 vue 關聯的外掛，這裡就不一一舉例了；
八、用 composables 靈活配置 hooks
在 Nuxt 3 中使用該目錄時，composables/ 目錄將自動匯入，將 Vue 可組合項（Hooks）自動匯入到您的應用程式中，即不需要在其它地方 import；
所以你如果寫一些通用的 hooks，只需放入該目錄下即可；
composables 的基本使用指南
1. 新建 src/composables 目錄
2. 新建 src/composables/useFoo.ts 檔案
export const useFoo = () => {
return useState('foo', () => 'bar')
}
3. 在 src/pages/index.vue 中使用
```
```
根據以上操作，你可以建立屬於你自己的 hooks
九、Nuxt 常用的 Hooks
以下 hooks 為內部整合的 API，不需要手動 import 匯入即可使用；
1. useAppConfig
訪問專案中的 Nuxt 配置 ``` const appConfig = useAppConfig()
console.log(appConfig) ```
2. useAsyncData
在頁面、元件和外掛中，您可以使用 useAsyncData 來訪問非同步返回的資料；
const { data, pending, error, refresh } = await useAsyncData(
'mountains',
() => $fetch('http://api.nuxtjs.dev/mountains')
)
3. useFetch
顧名思義，這就是一個 fetch 請求；
在頁面、元件或者外掛中可以使用 useFetch 獲取任意URL資源。
useFetch是對useAsyncData包裝，自動生成key同時推斷響應型別，用起來更簡單。
const param1 = ref('value1')
const { data, pending, error, refresh } = await useFetch('http://api.nuxtjs.dev/mountains',{
query: { param1, param2: 'value2' }
})
4. useCookie
在頁面、元件和外掛中，可以使用 useCookie一個 SSR 友好的 hooks 來讀取和寫入 cookie。
```
```
5. useHead
Nuxt 提供 useHead 可組合項來新增和自定義 Nuxt 應用程式各個頁面的頭部屬性。
6. useRoute
useRoute 是一個在實際專案開發中使用較多的 hooks，主要返回當前路由的一些資料；並且必須在 setup 函式、外掛或路由中介軟體中呼叫。
```
```
7. useRouter
useRouter 返回路由器的例項，並且必須在設定函式、外掛或路由中介軟體中呼叫。
ts
const router = useRouter();
router.back();
router.forward();
router.go();
router.push({ path: "/home" });
router.replace({ hash: "#bio" });
更多 Hooks 等相關 API 請檢視官網文件
十、配置 pinia
pinia 我這裡就不做多的介紹了，簡單解釋就是與 vuex 類似的一個狀態管理器；
1. 安裝：
bash
pnpm install pinia @pinia/nuxt
2. 配置 nuxt.config.js
ts
// nuxt.config.js
export default defineNuxtConfig({
// ... 其他配置
modules: [
// ...
'@pinia/nuxt',
],
})
3. 新建 src/stores/index.ts ：
4. 新建 src/stores/useUserStore.ts ：
```
import { defineStore } from 'pinia'
const USER_INFO = { userName: '易師傅', id: 1, sex: '男', }
export const useUserStore = defineStore('userInfo', () => {
const userInfo = reactive(USER_INFO)
return { userInfo, } }) ```
5. 使用 ```
```
至此就可以愉快的使用 pinia 了 ~
十一、配置 vueuse
VueUse 是一個基於 Composition API 的實用函式集合。
一句話：它就是一個工具函式包；
1. 安裝：
bash
pnpm install @vueuse/nuxt @vueuse/core
2. 配置 nuxt.config.js
ts
// nuxt.config.js
export default defineNuxtConfig({
// ... 其他配置
modules: [
// ...
'@vueuse/nuxt',
],
})
3. 使用 VueUse 函式： ```
```
是的，就是這麼簡單
十二、配置 css/scss/less/stylus
css 的整合有多種方式，有使用原生 css 的，也有使用 less 和 scss 的，也有使用 stylus 的；
為了快速上手，這裡我就不一一介紹了，下面主要以 scss 為例；
1. 安裝：
bash
pnpm install sass --save-dev
2. 新建 src/assets/styles 目錄新增預設 default.scss
scss
$bgColor: rgb(125, 159, 172);
$theme: red;
3. 在 nuxt.config.ts 中新增 scss 的配置
ts
export default defineNuxtConfig({
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: '@import "@/assets/styles/default.scss";'
}
}
}
}
})
3. 使用 ```
```
如果你想新增其它的 scss mixins 等方法，可自行新增
十三、其它
到這裡，專案的基本結構與目錄就 ok 了；
但是咱們試想一下，如果你的領導讓你去做 nuxt3 的 SSR 專案，你是不是應該考慮的更多？
其實目前咱們只是把專案搭建完了，專案上線後的伺服器的 打包部署、效能壓測、服務併發、負載均衡等等都是需要咱們去考量的；
關於這些，我會在後面新開專欄細講，敬請期待 ~
另外，nuxt 中還有一些配置是沒有講到的，例如：
- 其它
plugins等可自行挖掘； server目錄下的 API 路由等；middleware路由中介軟體；nuxt.config.ts配置相關；- 等等
感興趣的可自行查閱官方文件
總結
目前 Nuxt3 穩定版已正式釋出，如若您想寫一個 SSR 專案，Nuxt3 不失為你的一個選擇；
專案模板地址：github
最後
該系列會是一個持續更新系列，關於 前端基建，筆者主要會從如下圖幾個方面講解，如果您想第一時間看到我的更新文章，可以關注我和我的《前端要搞基建》專欄
專欄往期更新文章：
- 非大廠的我們，要如何去搞前端基建？
- 非大廠的我們，如何去卷一套標準的前端團隊規範？
- 非大廠的我們，如何去搞Vue/React Hooks和Utils的企業開源工具庫？
- 如何管理企業工具庫在pnpm monorepo多倉庫模式下的版本與發包
目前正集結一班大佬在寫開源工具庫（工具庫倉庫地址）；
如果您對 前端工具庫 感興趣，歡迎加入我們 ~
如果您對 Vue Hooks 感興趣，想寫自己的 Hooks，歡迎加入我們 ~
如果您對 React Hooks 感興趣，想寫自己的 Hooks，歡迎加入我們 ~
聯絡 vx: JeddyGong（備註開源）
如果想跟我一起討論技術吹水摸魚， 歡迎加入前端學習群聊(群人數太多，只能加vx，望諒解) vx: JeddyGong
感謝大家的支援，碼字實在不易，其中如若有錯誤，望指出，如果您覺得文章不錯，記得 點贊關注加收藏 哦 ~
關注我，帶您一起搞基建 ~
- Nuxt3正式版釋出，教你用vite nuxt pinia vueuse搞定前端SSR專案
- 非大廠的我們，如何去卷一套標準的前端團隊規範？
- 非大廠的我們，要如何去搞前端基建？
- 一文教你搞定前後端所有鑑權方案，讓你不再迷惘
- 除了 Qiankun， 這些微前端框架或許更適合你「建議收藏」
- 號稱吊打 Node 和 Deno 的 Bun 來了，你真的還卷的動嗎？
- 一個寫給初學者如何搞微前端的「從入門到放棄專欄」
- 為了讓vite打包更順暢，我開發了這個vite外掛
- 你還不會寫 vite 外掛嗎？沒關係，我教你啊！
- 教你使用 koa2 vite ts vue3 pinia 構建前端 SSR 企業級專案
- 手把手教你用 vite vue3 ts pinia vueuse 打造大廠企業級前端專案