iT邦幫忙

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

技術 #17 元件開發: ThePostPreview (default & admin 模式)

~~快要爆炸啦~~ ~~最近要趕工作~~ ~~快要齁不住了~~ 今天來寫一個文章摘要預覽的元件,主要有兩種模式: default: 使用者會看到的模式。 ad...

鐵人賽 Modern Web DAY 9

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

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

鐵人賽 Modern Web DAY 8

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

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

鐵人賽 Modern Web DAY 16

技術 #16 元件開發: TheMarkdown 自定義樣式

經過了前面兩篇新增了 markdown-it 和 highlight.js, 今天來開發 TheMarkdown 元件, 因為所需要的套件和設定都已經在前兩篇完...

鐵人賽 Modern Web DAY 7

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

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

鐵人賽 Modern Web DAY 15

技術 #15 套件安裝及設定: highlight.js 使用與 markdown-it-highlightjs 自定義套件撰寫

highlight.js 可以幫助我們寫出有高亮的 markdown。 其實已經有寫好的 markdown-it 套件,markdown-it-highligh...

鐵人賽 Modern Web DAY 14

技術 #14 套件安裝及設定: markdown-it

markdown-it 是一個 markdown parser。 官方 Demo 因為個人很喜歡寫 markdown, 所以當然部落格也要可以用 markdow...

鐵人賽 Modern Web DAY 13

技術 #13 元件開發: TheTags

上一篇將 blog 所需要的頁面整體結構都建好了, 但其實內容都還沒有做啊。 因為會用到許多套件,接下來的篇幅,會先將頁面所需要的元件寫完, 再完成所有頁面的切...

鐵人賽 Modern Web DAY 12

技術 #12: Pages 簡單介紹與初建所有頁面功能

如果看過上一篇的 layout/default 的截圖,可以大概了解 blog 的樣子。 這邊先簡單拆分為兩個部分: 管理者相關(使用 layout/admi...

鐵人賽 Modern Web DAY 4

技術 04. Nuxt 環境建立

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

鐵人賽 Modern Web DAY 11

技術 #11: 撰寫 Layouts (default, admin, error)

經過了十天,稍微回顧一下,目前的進度: 我們現在有一個 Nuxt 2.0 應用, UI framework 是使用 Vuetify, 並透過 storybook...

鐵人賽 Modern Web DAY 3

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

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

鐵人賽 Modern Web DAY 10

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

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

鐵人賽 Modern Web DAY 9

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

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

鐵人賽 Modern Web DAY 1

技術 01. Nuxt.js 小跑起步

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

鐵人賽 Modern Web DAY 8

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

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

鐵人賽 Modern Web DAY 7

技術 #7: Storybook 和 Nuxt.js

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

鐵人賽 Modern Web DAY 6

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

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

鐵人賽 Modern Web DAY 5

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

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

鐵人賽 Modern Web DAY 4

技術 #4: nuxt.config.js

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

鐵人賽 Modern Web DAY 3

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

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

鐵人賽 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 25
Vue 怎麼寫測試 系列 第 25

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

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