iT邦幫忙

nuxt相關文章
共有 54 則文章
鐵人賽 Modern Web DAY 1

技術 01. Nuxt.js 小跑起步

前言 寫文是為了將最近用 Vue.js + Nuxt.js 的使用細節整理,供日後參考。順序也許跟官網不太一樣,請多多包涵。 官方範例其實已涵蓋的大量情境,若是...

鐵人賽 Modern Web DAY 3

技術 #3: Nuxt.js 簡介 & 學習連結分享

上一篇,在不知道 Nuxt 是什麼的情況下,使用create-nuxt-app建立了一個 Nuxt 應用。 今年 9/21 在倫敦舉辦的 Vue Confere...

鐵人賽 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 7

技術 07. Nuxt 頁面怎麼切會更好?以電商登入頁為例

本來打算介紹 Nuxt 版面依功能劃分、由哪些區塊組成。 想到六角學院才比完《甜點電商PK賽》,現成切好的版面很好找,參賽選手也不少,拿來說明與練習再適合不過。...

鐵人賽 Modern Web DAY 3

技術 03. Nuxt.js 怎麼處理 SSR 問題?擔任什麼角色?

關於 Universal Rendering 前一篇提到,原本前後端的 View 各自分開 隨著前端漸漸吃重,為了讓畫面邏輯不需要分散各處,有人提出新的架構 -...

鐵人賽 Modern Web DAY 9

技術 #9: Vuetify 簡介 + (vuetify.config.js)

Vuetify 是一個基於 Vue 的 UI 框架, 類似於 Vuetify 的框架或函式庫有很多,例如: Element UI VueStrap...

鐵人賽 Modern Web DAY 4

技術 #4: nuxt.config.js

這篇稍微介紹一下 nuxt.js 的設定檔: nuxt.config.js。 可以將以下專案 clone 下來,了解一下基本目錄結構。 github repos...

鐵人賽 Modern Web DAY 4

技術 04. Nuxt 環境建立

這篇寫常用情境 產生新 Nuxt 專案 Vue.js SPA 寫一半,得追加 SSR 產生完整 Nuxt 專案 入門寫 Vue.js,新專案用 Vue-cl...

鐵人賽 Modern Web DAY 2

技術 #2: 三秒建立一個 Nuxt 應用

create-nuxt-app 要建立一個 Nuxt 應用,真的非常容易, 只需要透過 create-nuxt-app 工具。 指令: npx create-n...

鐵人賽 Modern Web DAY 1

技術 #1: 前言&簡介&大綱

前言 首先,這不太算一個 Nuxt 教學文,只是想分享自己用 Nuxt 建立一個 blog。 這次參賽的目標是想分享自己學到的知識,並記錄自己的學習過程,所以東...

鐵人賽 Modern Web DAY 8

技術 08. Nuxt 客製《甜點電商》SEO 基本資訊

客製 SEO 資訊 上一章讓登入頁有了基本樣貌,但需要 SSR 是為了解決兩大問題 SEO SMO 具體怎麼做? 前端最基本的,在 埋對應的 Meta T...

鐵人賽 Modern Web DAY 25

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

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

鐵人賽 Modern Web DAY 26

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

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

鐵人賽 Modern Web DAY 7

技術 #7: Storybook 和 Nuxt.js

storybook 版本升級 如果有看上一篇的話,會發現上一篇的範例用的是 storybook 3.4.10。 因為重新用 webpack4 建立了 Nuxt...

鐵人賽 Modern Web DAY 27

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

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

鐵人賽 Modern Web DAY 30

技術 30. 總結,路還長著

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

鐵人賽 Modern Web DAY 5

技術 #5: Boilerplate(pug & stylus & 其他基礎設定)

在簡單介紹完 Nuxt.js 之後, 今天會接著將 Day02 的 002-create-nuxt-app branch 接續開發下去, 目標是加入: pug...

鐵人賽 Modern Web DAY 28

技術 28. Nuxt 靜態頁部署

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

鐵人賽 Modern Web DAY 9

技術 09. Nuxt 頁面元件細部設定

Nuxt 頁面元件跟 Vue File 哪裡不同? Nuxt Routing 自動映射介紹過,/pages 的 Vue File 對應各個頁面。 雖然寫法一樣,...

鐵人賽 Modern Web DAY 24

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

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

鐵人賽 Modern Web DAY 10

技術 #10: Vuetify 導入 Storybook & Nuxt.js

上一篇將 vuetify 的 theme 拆成獨立的檔案 (vuetify.config.js)。 這篇會將 vuetify 引入 storybook 中,同步...

鐵人賽 Modern Web DAY 29

技術 29. Nuxt Universal App 部署至 Heroku

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

鐵人賽 Modern Web DAY 6

技術 #6: Storybook(含有兩個元件範例)

Storybook 簡介 官方 Demo Storybook 方便我們開發 UI 元件, 使用 storybook 可以看到 UI 元件在不同狀態下的樣貌。 另...

鐵人賽 Modern Web DAY 16

技術 16. Nuxt 全域設定檔 (nuxt.config.js),可以吃嗎?

前幾篇提過頁面細部設定,對某一頁調 <head>、改 transition等細部調整。 有些調整,突然 PM 希望套用到整個網站,該怎麼辦? 而前文...

鐵人賽 Modern Web DAY 12

技術 12. Nuxt 客製頁面效果 - 讀取(Loading)

這篇是頁面客製段落其二,主題講「Nuxt 頁面讀取效果如何調整」 用來補充頁面細部設定 讓我們回想錯誤頁面,是用來「呈現錯誤狀態的頁面元件」 而頁面渲染前,N...

鐵人賽 Modern Web DAY 18

技術 18. Nuxt 運行模式 (Mode) 差在哪?

這篇打算介紹 Nuxt 可運行模式與解決情境 其中兩種靠調整設定,決定是否需要 Node Server Universal SPA 以及單純靜態頁 靜態頁...

鐵人賽 Modern Web DAY 25
Vue 怎麼寫測試 系列 第 25

技術 Day 25. 實作一個電商網站 - refactor

記得上 Github 拉專案來自己玩玩看: https://github.com/MOSapeizer/vue-ecommerce 也可以發 pull requ...

鐵人賽 Modern Web DAY 8

技術 #8: Plop: 三秒寫一個 component

上一篇,整合了 Storybook 和 Nuxt,也建立了一個元件為 MyButton。 但如果每次要新增一個元件,就要建立四個檔案如下: index.js...

鐵人賽 Modern Web DAY 22

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

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