前端筆記:第1頁

Nuxt 3 專案初始設定整理
本系列是紀錄自己平常建立新的 Nuxt 3 專案時會引入的一些設定,覺得之前 Nuxt 2 在建立時有很多選項可以選,選好之後都自動設定好真的是很棒……。

在Fedora中透過podman使用VSCode DevContainer
之前在中曾經紀錄過如何使用 VSCode DevContainer 來容器化開發 Vue 專案,但因為自己平常用的作業系統是 Fedora,而 Fedora 內建的容器化引擎是 Podman,雖然 Podman 號稱與 Docker 之間的指令是互通的,但之前嘗試過會有錯誤而且一直找不到解方。

使用VSCode搭配DevContainer容器化開發Vue專案
在這個什麼都可以容器化的年代,開發也是可以容器化的。容器化的好處多多,其中自己覺得最重要的部份就是不再需要寫繁雜的設定步驟文件流傳後代(?),只要寫好 dockerfile,就能 1:1 重製開發環境。

設定PM2來管理Nuxt SSR網站
最近想整理一下自己在工作中用到的工具集,回頭看發現比較不熟的是 pm2 的初始設定,畢竟設定好之後也只會用到pm2 status、pm2 logs、pm2 monit……這些維護用的指令而已,就決定先從 pm2 開始紀錄了。

部落格Nuxt 2升級Nuxt 3(二):基本架構與設定值
在抽換 UI 框架之後,接下來就開始真正的升級之旅了。參考官方的升級指南,第一步就是先修改設定值。

部落格Nuxt 2升級Nuxt 3(三):Nuxt Content v1 → v2
在初步修改非模組的設定值之後,接著就要開始著手模組的升級,這部份是連同改寫為 composition api 一起做的,畢竟不可能只升級特定模組的用法而不去動到其他程式碼,但為了讓文章閱讀容易,就還是分模組來紀錄。

部落格Nuxt 2升級Nuxt 3(四):PWA模組 @nuxt/pwa → @vite-pwa/nuxt
在紀錄了最重要的Nuxt Content升級過程之後,接著是 PWA 模組。

部落格Nuxt 2升級Nuxt 3(五):Sitemap模組升級
原本使用的 Sitemap 模組 @nuxtjs/sitemap 有支援 Nuxt 3 的版本,所以升級起來不如前面幾篇困難,主要就是修改一下設定值而已。

部落格Nuxt 2升級Nuxt 3(六):Vuex → Pinia
Nuxt 3 的狀態管理套件從 Nuxt 2 的 Vuex 改成了 Pinia,兩者差異不算大,部落格用到的功能也不多。其中比較要注意的就是 Nuxt 3 不再提供nuxtServerInit方法,若需要在 server 端初始化一些資料的話,就要透過其他作法來完成。

部落格Nuxt 2升級Nuxt 3:前言
從去年年初開始建置的這個部落格網站,邊寫文章的同時陸陸續續補上功能後,大概到上個月才終於像是有個部落格的樣子。但由於 Nuxt2 即將在 2024/06/30 停止官方支援,而作為基底的 Vue2 更是在 2023/12/31 已停止官方支援,所以……想說要做的新功能可能先放著,先把部落格從 Nuxt2 升級到 Nuxt3 比較好。