iT邦幫忙

nuxt相關文章
共有 103 則文章
鐵人賽 Modern Web DAY 18
Nuxt 3 學習筆記 系列 第 18

技術 [Day 18] Nuxt 3 Runtime Config & App Config

前言 在 Nuxt 3 中提供了兩種可以方式設定環境變數或前端需要使用的共用設定,分別是在 Nuxt 啟動時會在後端載入使用的 Runtime Config 及...

鐵人賽 Modern Web DAY 17
Nuxt 3 學習筆記 系列 第 17

技術 [Day 17] Nuxt 3 狀態管理 - Store & Pinia

前言 上一篇我們介紹了如何在 Nuxt 3 使用 useState 來建立一個元件間的共享狀態,隨著專案的健壯增大,我們就需要一個更好的方式來管理與儲存這些狀態...

鐵人賽 Modern Web DAY 16
Nuxt 3 學習筆記 系列 第 16

技術 [Day 16] Nuxt 3 狀態管理 (State Management)

前言 Vue 3 父子元件間資料傳遞與讀寫或是跨元件間的狀態共享,可以選擇使用 Props / Emit、Provide / Inject 或 Vuex sto...

鐵人賽 Modern Web DAY 15
Nuxt 3 學習筆記 系列 第 15

技術 [Day 15] Nuxt 3 資料獲取 (Data Fetching)

前言 現在的網站技術與前端框架的推進,使用 AJAX (Asynchronous JavaScript and XML) 技術發送 API 至後端進行資料獲取已...

鐵人賽 Modern Web DAY 14
Nuxt 3 學習筆記 系列 第 14

技術 [Day 14] Nuxt 3 Server API 與 Nitro Engine

前言 本篇將介紹如何在 Nuxt 3 中建置 Server API,在這之前會先介紹一下 Nitro Engine 是什麼東西,Nitro 可能不多人聽過但與...

鐵人賽 Modern Web DAY 13
Nuxt 3 學習筆記 系列 第 13

技術 [Day 13] Nuxt 3 中間件目錄 (Middleware Directory)

前言 在 Vue 的專案內我們的頁面通常由 Vue Router 來控制路由及導航,Vue Router 提供了導航守衛 (Navigation Guards)...

鐵人賽 Modern Web DAY 12
Nuxt 3 學習筆記 系列 第 12

技術 [Day 12] Nuxt 3 模組 (Modules)

前言 在使用 Nuxt 開發過程中,我們可以透過配置模組 (Modules) 或插件 (Plugin)來進行擴充,在[[Day 11] Nuxt 3 插件 (P...

鐵人賽 Modern Web DAY 11
Nuxt 3 學習筆記 系列 第 11

技術 [Day 11] Nuxt 3 插件 (Plugins)

前言 在開發時,為了不重複造輪子,我們可能會在網路上找看看有沒有現成的套件可以做使用,如果這個套件在 Nuxt 3 沒有專用的模組或插件,那麼我們就只能依照套件...

鐵人賽 Modern Web DAY 10
Nuxt 3 學習筆記 系列 第 10

技術 [Day 10] Nuxt 3 組合式函式 (Composables)

前言 組合式函式 (Composables) 是一種利用 Vue 3 的 Composition API 來封裝和複用有狀態邏輯的函式,在 Nuxt 我們可以將...

鐵人賽 Modern Web DAY 9
Nuxt 3 學習筆記 系列 第 9

技術 [Day 09] Nuxt 3 元件 (Components)

前言 在建立 Vue 的網站開發過程中,我們可能會自己封裝元件 (Component) 讓程式碼可以被重複使用,也方便開發者維護,這些一個個的元件,可以透過全域...

鐵人賽 Modern Web DAY 8
Nuxt 3 學習筆記 系列 第 8

技術 [Day 08] Nuxt 3 布局模板 (Layouts)

前言 Nuxt 3 提供了一個布局模板 (Layouts) 的功能,可以讓你定義好布局模板後,在整個 Nuxt 中使用,舉例來說就很適合如上方有導覽列,下方是網...

鐵人賽 Modern Web DAY 7
Nuxt 3 學習筆記 系列 第 7

技術 [Day 07] Nuxt 3 頁面 (Pages) 與路由 (Routing)

前言 在 Vue 中,我們會使用到 Vue Router 來實現切換頁面或路由的需求,而在 Nuxt 3 中,預設是沒有使用路由相關套件,直至建立了 pages...

鐵人賽 Modern Web DAY 6
Nuxt 3 學習筆記 系列 第 6

技術 [Day 06] Nuxt 3 目錄結構與自動載入 (Auto Imports)

前言 隨著整個專案的開發,目錄與元件勢必也會越來越多,如同 Vue 3 的專案可能會有專門放置元件目錄 components 等,在 Vue 3 我們可能不太需...

鐵人賽 Modern Web DAY 5
Nuxt 3 學習筆記 系列 第 5

技術 [Day 05] Nuxt 3 如何使用 Tailwind CSS

前言 為了後續範例程式在頁面呈現上能有比較好看的樣式,原先有想過使用 UI 框架或純寫 CSS,但是總覺得好像不夠潮,所以呢,我決定帶入近年滿熱門的 CSS 框...

鐵人賽 Modern Web DAY 4
Nuxt 3 學習筆記 系列 第 4

技術 [Day 04] Nuxt 3 + TypeScript + ESLint + Prettier 環境建置

前言 在我們使用完 Nuxt CLI 建立完專案後,其實就可以開始進行專案的開發,但是呢,相信不少人對於程式碼的排版都有自己的風格,不同人的 Coding St...

技術 Nuxt 3 + ESLint + Prettier 環境建置

前言 大家好,我是 Ryan,這篇文章是我參與 iThome 2022 鐵人賽 [Day 04] Nuxt 3 + TypeScript + ESLint +...

鐵人賽 Modern Web DAY 3
Nuxt 3 學習筆記 系列 第 3

技術 [Day 03] Nuxt 3 - 使用 nuxi 建立第一個專案

前言 身為前端工程師開發網頁,程式碼編輯器肯定必不可少,在這個系列將會使用 VS Code 進行開發,不過呢,也並沒有說一定非得使用 VS Code,所以說不論...

鐵人賽 Modern Web DAY 2
Nuxt 3 學習筆記 系列 第 2

技術 [Day 02] Nuxt 3 介紹

前言 淺談 CSR、SSR 與 SSG的文中有提到,採用 SSR + SPA,將第一個畫面透過 SSR 產生,其他就交給 CSR 來做處理,既能兼具 SEO 還...

技術 [學習筆記] 去除chrome翻譯功能

參考文章禁用和启用google翻译 首先有兩個步驟: head 內加入 meta 標籤 <meta name="google"...

鐵人賽 Modern Web

技術 32. Nuxt 整合 API 服務

這篇介紹 API 服務整合 若頁面內容不全靠 SSR 產生,部分頁面資料得透過瀏覽器向第三方、自架 API 後端抓取,會碰到跨域 + CORS 問題。 為什麼需...

鐵人賽 Modern Web

技術 31. Nuxt 部署 - 反向代理

Nuxt 以 Universal 模式運行下,後端會起 Node Server (預設是 http://127.0.0.1:3000 ) 網站服務一般都走 8...

鐵人賽 Modern Web DAY 30

技術 30. 總結,路還長著

第 30 天,聊一下開始玩 Nuxt 的緣由(本來想寫整合 API 服務,發現內容前面沒提觀念太多,有點跳) 一開始嘗試處理 SEO 混著後端框架寫 Vue (...

鐵人賽 Modern Web DAY 29

技術 29. Nuxt Universal App 部署至 Heroku

前一篇介紹靜態頁部署,若換成 Universal Mode 呢? 「需要個 Node Server,不時讓人戳」 當工程師懶得管機器 (或你分身乏術),想把環境...

鐵人賽 Modern Web DAY 28

技術 28. Nuxt 靜態頁部署

這篇介紹靜態頁面部署方式讀者可用電商登入頁案例試試 Nuxt 命令介紹過運行模式差異,透過命令 $ yarn generate /* npm run gene...

鐵人賽 Modern Web DAY 27

技術 27. @nuxtjs/axios 如何透過 module 包裝 axios

Nuxt Axios 模組 - @nuxtjs/axios ,是官方推薦使用的 HTTP Client Module主要功能及組成有 axios 提供 HT...

鐵人賽 Modern Web DAY 26

技術 26. Nuxt Module,Nuxt 的擴充元件

Nuxt 不像 Angular 這種大型框架,功能包山包海,核心功能不夠得自行擴充。雖然提過如何透過全域/頁面設定客製、用 Plugin 收納初始化片段,但對於...

鐵人賽 Modern Web DAY 25

技術 25. Nuxt Plugin 如何讓 Axios 更好用 (下)

上一篇解釋 Nuxt 插件 (Plugins)用於管理特定執行環境的程式碼片段,並在 Nuxt App 自動載入、執行 Plugin 使用 一貫簡單風格,需要載...

鐵人賽 Modern Web DAY 24

技術 24. Nuxt Plugin 如何讓 Axios 更好用 (上)

複習一下 asyncData 動態產生頁面,作業得透過 axios 拉 product api,藉此產生商品頁面的情境 安裝 Axios $ yarn add...

鐵人賽 Modern Web DAY 23

技術 23. Nuxt 細說`<nuxt-child>` 和 `<nuxt>`

這篇打算為 Nuxt 內建元件收尾,介紹最後兩種 &lt;nuxt-child&gt; &lt;nuxt&gt; 回顧上一章,巢狀路由讓 slug...

鐵人賽 Modern Web DAY 22

技術 22. Nuxt Routing 進階 - 巢狀路由/嵌套路由 (Nested Routes)

Nuxt 路由入門 篇介紹過兩層動態路由 pages/ --| _slug/ -----| comments.vue -----| index.vue --|...