#nuxt3

Nuxt3 ｜ 2023-08-08

本篇文章同步發表於 2023 iThome 鐵人賽：Nuxt.js 3.x 筆記－打造 SSR 專案

CKEditor 版本：v39.0.0

Nuxt2 搭配 CKEditor 5 請參考 這篇文章

CKEditor 是一套歷史悠久且功能完整、輕量的富文本編輯器（rich text editor），為使用者提供所見即所得（WYSIWYG）的編輯區域。與舊版不同，CKEditor 5 使用 MVC 架構、ES6 編寫、UI 簡潔，且因應現在的前後端分離趨勢，與前端框架 React、Angular、and Vue.js 做整合，讓我們可以更便利的開發應用。

閱讀更多

Nuxt3 ｜ 2023-08-04

本篇文章同步發表於 2023 iThome 鐵人賽：Nuxt.js 3.x 筆記－打造 SSR 專案

Stylelint 是一套用於規範 CSS 和 CSS 預處理器（SCSS、Less 等）程式碼的工具，幫助我們維持程式碼的品質和風格。Stylelint 進行檢查時，會根據指定的規則來發現潛在的錯誤、不一致的風格和不推薦的模式。

以 *.vue 檔為例，檔案內包含三種主要的程式碼：<template>、<script> 和 <style>：

  1. <template>：Vue.js 模板語法，用以定義 HTML，例如插槽 {{ }}、條件判斷和迴圈等。雖然這不是嚴格的 JavaScript 語法，但 ESLint 也提供了相關規則對模板語法進行檢查
  2. <script>：JavaScript 區塊，由 ESLint 進行程式碼檢查
  3. <style>：CSS 區塊，用於定義元件樣式，由 Stylelint 進行程式碼檢查

ESLint 搭配 Stylelint，讓專案保持良好的 Coding Style。本篇將說明如何在 Nuxt3 專案搭配 Stylelint 工具。

ESLint JavaScript 程式碼檢查工具參考 這篇文章

閱讀更多

Nuxt3 ｜ 2023-07-19

本篇文章同步發表於 2023 iThome 鐵人賽：Nuxt.js 3.x 筆記－打造 SSR 專案

先前在 Nuxt2 介紹如何使用 axios 取得 API 資料（文章連結）

Nuxt3 提供了全域可使用的內建函式庫 $fetch 以及 composables useFetch、useAsyncData，不需要在另外安裝套件，三個方法依據時機搭配使用，可以確保整體兼容性與快取效能，且能避免重複請求的問題

Nuxt2 的 asyncData 以及 fetch 方法，在 Nuxt3 調整為 useAsyncData 與 useFetch

閱讀更多

Nuxt3 ｜ 2023-07-11

本篇文章同步發表於 2023 iThome 鐵人賽：Nuxt.js 3.x 筆記－打造 SSR 專案

定義在 composables 以及 utils 資料夾的檔案 Nuxt 都會自動引入（auto-imports），兩者都是用來定義複用邏輯的函式，不過使用情境有點不同，接下來分別說明。

Composables & Utils 使用時機比較

  • composables/：
    組合式函式，利用 Composition API 來封裝和複用 有狀態邏輯（Stateful Logic）的函式，取代 Options API mixins/ 的功能。我們可以將不同的邏輯抽象成單獨的 composable，並組合在 setup 函式中
  • utils/：
    與 composables 做語意上的區隔，用來定義 無狀態邏輯（Stateless Logic）的函式

狀態邏輯說明：

  • 無狀態邏輯函式：
    例如計算兩個數字相加的函式。當輸入值後，經過函式運算返回值，不會受其他狀態影響。無論何時輸入相同的值，都可以得到相同結果，大部分封裝共用方法屬於此類
  • 有狀態邏輯函式：
    例如計數器函式，函式會控制變數。觸發函式時，狀態就會改變，每次觸發的結果不會相同

閱讀更多

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×