07. Nuxt 頁面怎麼切會更好?以電商登入頁為例 - iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天
ithelp.ithome.com.tw · 338 words · saved by 1 readers
本來打算介紹 Nuxt 版面依功能劃分、由哪些區塊組成。 想到六角學院才比完《甜點電商PK賽》,現成切好的版面很好找,參賽選手也不少,拿來說明與練習再適合不過。 所以這篇換成登入頁來解釋頁面怎麼組成?...
本來打算介紹 Nuxt 版面依功能劃分、由哪些區塊組成。 想到六角學院才比完《甜點電商PK賽》,現成切好的版面很好找,參賽選手也不少,拿來說明與練習再適合不過。 所以這篇換成登入頁來解釋頁面怎麼組成?預先切好的版面如何拆分? 登入頁取自 六角校長gonsakon 前置工作 Assets 搬家 靜態資源待會登入頁需要,將img、sass、js等搬到 Nuxt assets 模板語言換成 Pug $ yarn add -D pug pug-plain-loader 樣式換成 SASS $ yarn add -D node-sass sass-loader 安裝 SUSY (這版面用 SUSY 定義格線系統) $ yarn add -D susy 定義全域樣式 nuxt.config.js /* ** Global CSS */ css: [ '@/assets/sass/all.sass' ], 定義 Page 先新增 pages/login.vue 登入頁 <template lang="pug"> .col-container .p-login.col-row form.p-login__account(action="/") .p-login__account__block…
saved by
related reading
- Universal application code structure in Nuxt.js | by Krutie Patel | We’ve moved to freeCodeCamp.org/news | Mediummedium.com
- 4,000+ Website Section Designs - Hero, CTA, Pricing & More | Unsectionunsection.com
- Getting Started: Layouts and Pages | Next.jsnextjs.org
- Subframe – The AI design tool built for codesubframe.com
- Town | The AI Assistant That Does the Worktown.com
- Svelte Efferd Blocks | Marketing Blocks for Shadcn-Sveltesv-efferd.pages.dev
- beUI Pro — Premium motion components for Reactpro.beui.dev
- ui.sh — Agent skills for interface buildersui.sh
- Getting Started: Layouts and Pages | Next.jsnextjs.org
- next.js/examples at canary · vercel/next.jsgithub.com
- Detail · Where craft livesdetail.design
- Geistvercel.com