嗨,我是阿蘇,一位熱愛前端的小小工程師。 今年有幸開始接觸 Vue.js,並踏上了學習框架的旅程,Vue.js 是一個輕量級的前端框架,非常易於理解和上手,隨著學習的深入,我開始發現它更多的深奧之處,像是 Vue 3 的 Composition API 和 Nuxt 3 ; 因此,我希望能夠透過這 30 天的深入學習,從概念、實作、元件運用、 Composition API 、 Nuxt 3 、Vite,將這些知識通通掌握起來,讓我們一起開始30天的 Vue.js 學習旅程吧!
Nuxt.js 是基於 Vue.js 的輕量框架,結合 SSR 及 SPA,在頁面載入前即渲染,解決 Vue.js SEO 成效不佳的問題。 Nuxt 3 在 2022 年底推出了穩定版本,除了支援 TypeScript,更徹底的進行重構,精簡了核心、編譯速度更快,提升開發體驗。 這次將從基礎專案建立開始說明,介紹主要架構與功能、套件應用,以及如何提升 SEO,將學習過程筆記起來,加深印象!
這個系列文章將帶領初學者在30天內從 Nuxt 3 的基礎到實踐,藉由範例讓你了解 Nuxt 3 各種原理,深入了解 Nuxt 3 的核心概念。在這30天當中將會一步步建立 Nuxt 3 專案,並介紹專案結構、元件、路由、狀態管理等 Nuxt 3 各項功能,此外,還會示範 Nuxt 3 好用的模組及 Unocss,幫助你快速開發及美化網站無論你是 Vue 的新手還是老手,只要你有一些 HTML、CSS 和 JavaScript 的基礎知識,就可以跟著這個系列文章一起學習 Nuxt 3 的魅力。讓我們一起開始吧!
在工作上使用Vue半年多了,一直苦無機會用到Nuxt跟圖表類的套件.恰巧之前曾在金融機構服務過,那不如就結合之前的職涯經驗,試著做出個投資人走過路過會想看看的儀表板吧!!
Nuxt 3 發布穩定版本已經過了將近一年,功能與版本也積極的在創新與維護,如果你還苦惱 Vue 或其他前端框架不好做 SEO 的問題,你一定要試試 Nuxt 3 帶給你前所未有的開發體驗,初次使用 Nuxt 3 的你也可以參考我的其他系列文章學習基礎概念,若你已經熟悉 Nuxt 3 所帶給你的開發體驗,在 SSR 與 SSG 及SEO 搜尋引擎最佳化中也已有了基本的概念,你可以藉由本系列更深入的暸解 Nuxt 3。 本系列著重在探索 Nuxt 3 更多的功能特性與模組,我將介紹 Nuxt CLI 、視覺化工具、SEO 系列、網站最佳化與分享解決方案等,讓你的網站有可能性以應付實戰需求。
在使用 Vue 3 開發網站可能會面臨需要做 SEO 的情境,為了解決該情境問題,你可能會找到使用 Vite 做預渲染或其他方式,Nuxt 3 也是其中一個解決方案,且有更多強大的功能,目前 Nuxt 3 已是穩定版本,你可以使用它來實現 SSR 來解決 SEO 痛點。 本系列以影片教學搭配筆記的方式來快速入門 Nuxt 3,所以你可能需具備些 Vue 3 基礎,我將從搭建 Nuxt 3 開發環境、頁面路由與佈局一直到使用 Nuxt 3 建立 SEO 所需的資訊做些分享及介紹,讓你有個概念並嘗試用 Nuxt 3 來做 SSR 或 SSG,進而解決 Vue 3 SPA 不好做 SEO 的問題。
延續去年自我挑戰的 [Blog 掛掉時在做什麼?有沒有空?可以來重建嗎?](https://ithelp.ithome.com.tw/users/20103676/ironman/5917) 系列文,重新分享這一年製作出來的具體成果。