Nuxt 3 alapblog sablon – Bfotool Nuxtjs alapblog(Vue 3 + TypeScript + Tailwind)

Ha modern Nuxt 3 blogindító sablont keresel, a Bfotool Nuxtjs Base Blog kiváló megoldás. Ez egy teljes funkcionalitású blogalkalmazás, amely Nuxt 3, Vue 3, TypeScript és Tailwind CSS segítségével készült, és amelynek célja, hogy segítsen a fejlesztőknek gyorsan professzionális blogot létrehozni anélkül, hogy a fejlesztés során backendre lenne szükség.

A projekt egy Axios interceptorokkal működő hamis API réteget tartalmaz, amely egy valódi REST API-t szimulál. Ez tökéletessé teszi a Nuxt architektúra elsajátításához, alkalmazások prototípusainak készítéséhez vagy termelésre kész blogplatformok építéséhez.

A tárhelyet itt böngészheted: 👉 https://github.com/bfotool/nuxtjs-base-blog

Mi az a Bfotool Nuxtjs Base Blog?

A Bfotool Nuxtjs Base Blog egy modern blogalkalmazás-sablon, amely a legújabb frontend technológiákkal készült. Teljes blogolási felületet biztosít bejegyzésekkel, kategóriákkal, keresési funkcióval és kapcsolatfelvételi oldalakkal.

A projekt letisztult Nuxt 3 architektúrával készült, így könnyen érthető és bővíthető.

A legfontosabb kiemelések a következők:

• Teljes blog felhasználói felület reszponzív dizájnnal

• Mock REST API fejlesztéshez háttérrendszer nélkül

• Modern Vue 3 Composition API-val készült

• Típusbiztos fejlesztés TypeScript segítségével

• SEO-kész metakonfiguráció

• Sötét és világos témák támogatása

A tárhely itt található:

👉 https://github.com/bfotool/nuxtjs-base-blog

Ez a sablon ideális a következőkhöz:

• Személyes blogok

• Céges blogok

• Fejlesztői portfóliók

• Nuxt 3 architektúra elsajátítása

• Tartalommal rendelkező weboldalak gyors prototípusgyártása

Főbb jellemzők

C class="ac-h3"teljes blogoldalak

A sablon egy teljesen megvalósított oldalkészletet tartalmaz, amelyek jellemzően egy blogplatformon szükségesek.

A fő oldalak a következőket tartalmazzák:

• Kezdőlap – Kiemelt főbejegyzést, kategóriaszűrőket és lapozott bejegyzéseket jelenít meg

• Blogbejegyzés oldal – Teljes cikk nézet tartalomjegyzékkel és kapcsolódó bejegyzésekkel

• Kategória oldal – Böngésszen a kategóriák szerint szűrt bejegyzések között

• Keresőoldal – Valós idejű keresés visszapattanásgátló funkcióval

• Rólunk oldal – Mutasd be a csapatodat, a küldetésedet vagy a márkádat

• Kapcsolatfelvételi oldal – Kapcsolatfelvételi űrlap érvényesítéssel és visszajelzéssel

• Hibaoldal – Egyéni hibakezelő felhasználói felület

Ez a struktúra használatra kész blogélményt nyújt a felhasználók számára.

< class="ac-h3"h3>Hamis API réteg fejlesztéshez

A projekt egyik legerősebb tulajdonsága a mock API rendszer .

A valódi háttérrendszerhez való csatlakozás helyett a projekt Axios interceptorok használatával szimulálja az API-válaszokat .

Ez a megközelítés lehetővé teszi a fejlesztők számára, hogy:

• Frontend funkciók létrehozása backend függőségek nélkül

• Tesztoldalazás, szűrés és rendezés

• Valós API válaszkésleltetések szimulálása

• Könnyen válthat később egy valódi háttérrendszerre

A mock API olyan végpontokat tartalmaz, mint például:

• /posts

• /posts/featured

• /posts/:slug

• /categories

• /authors

• /contact

Mivel az API-t a useApi composable függvényen keresztül lehet absztraktálni, a valódi háttérrendszerre való váltás minimális konfigurációt igényel.

Modern Nuxt 3 építészet

A projekt a Nuxt 3 ajánlott fejlesztési mintáit követi, így nagyszerű referenciaként szolgál a keretrendszert tanuló fejlesztők számára.

Fontos építészeti jellemzők a következők:

• Automatikusan importált komponensek és összeállítható elemek

• TypeScript-alapú fejlesztés

• Összeállítható API szolgáltatási réteg

• Moduláris mappaszerkezet

• SEO metakonfiguráció

• Oldalátmenetek

Az alkalmazás a következőket is használja:

• useSeoMeta()SEO címkékhez

• useColorMode()a témaváltáshoz

• useRoute()és más beépített Nuxt komponálható elemek

Sötét mód és reszponzív dizájn

A felhasználói felület támogatja a sötét és világos témákat a használatával @nuxtjs/color-mode.

Jellemzők többek között:

• Automatikus rendszertéma-észlelés

• Téma manuális váltása

• Hátszél CSS stílus

• Mobilközpontú reszponzív elrendezés

Ez biztosítja a blog zökkenőmentes működését a következőkön keresztül:

• Asztali

• Tabletták

• Mobil eszközök

P class="ac-h3"erőteljes blogfunkciók

A blogsablon számos olyan fejlett funkciót tartalmaz, amelyek jellemzően az éles blogplatformokon találhatók.

Ezek közé tartoznak:

• Markdown címsorokból generált tartalomjegyzék

• Kapcsolódó bejegyzésekre vonatkozó javaslatok

• Becsült olvasási idő

• Kategória szűrés

• Teljes szöveges keresés visszavonásával

• Intelligens oldalszámozás

• Pirítós értesítések

• Vázszerkezeti alkatrészek betöltése

• Animált oldalátmenetek

Ezek a funkciók modern olvasási élményt nyújtanak a blog látogatóinak.

Technológiai verem

A projekt egy modern frontend stack segítségével épül fel.

Réteg	Technológia
Keretrendszer	Nuxt 3.15
Felhasználói felület könyvtára	3.5-ös kép
Nyelv	TypeScript 5.7
Stílus	Hátszél CSS 3.4
Államigazgatás	Pinia
HTTP kliens	Axios
Ikonok	Iconify @nuxt/icon-on keresztül
Téma	@nuxtjs/színmód
Szöszölődés	ESLint
Formázás	Csinosabb

Ez a verem teljesítményt, skálázhatóságot és karbantarthatóságot biztosít .

Projektstruktúra áttekintése

A tárhely tiszta és szervezett struktúrát követ.

Fontos címtárak a következők:

Oldalak

A pagescímtár meghatározza a fő útvonalakat:

• index.vue– Kezdőlap

• about.vue– Rólunk oldal

• contact.vue– Kapcsolatfelvételi űrlap

• search.vue– Keresőfelület

• blog/[slug].vue– Blogbejegyzés oldal

• blog/category/[slug].vue– Kategóriaoldal

Com class="ac-h3" komponensek

Az újrafelhasználható felhasználói felület komponensei logikai kategóriákba vannak csoportosítva:

• layout– Fejléc és lábléc

• common– Lapozás, vázbetöltők, pirítós értesítések

• blog– Blogspecifikus komponensek, például képeslapok és tartalomjegyzék

Comp class="ac-h3"osables

A composables könyvtár újrafelhasználható logikát tartalmaz.

Fontos kompozit anyagok a következők:

• useApi()– Típusos API szolgáltatási réteg

• useDebounce()– Reaktív értékek debounce-olása

< class="ac-h3"h3>Model API réteg

A mock rendszer a könyvtáron belül található mocks.

Tartalmazza:

• handlers.ts– API kéréselfogók

• posts.ts– Minta blogbejegyzések

• authors.ts– Szerzői adatok

• categories.ts– Kategóriaadatok

Ez a struktúra megkönnyíti a projekt módosítását és bővítését .

A projekt telepítése és futtatása

A projekt helyi futtatásához kövesse az alábbi lépéseket.

Előfeltétel class="ac-h3"uites

Szükséged van rá:

• Node.js 18.17 vagy újabb

• npm, fonal vagy pnpm

A tárház klónozása

git clone https://github.com/bfotool/nuxtjs-base-blog.git 
cd nuxtjs-base-blog 

class="ac-h3"Telepítési függőségek

npm install

Fejlesztői szerver indítása

npm run dev

Ezután nyisd meg a böngésződet a következő címen:

http://localhost:3000

A Nuxt fejlesztői szerver automatikusan újratöltődik, amikor a fájlok megváltoznak.

Váltás Mock API-ról valódi API-ra

A projekt egyik legjobb tervezési döntése az egyszerű API-váltás .

Egy valódi háttérrendszer csatlakoztatásához:

1. Állítsa be a környezeti változót:

NUXT_PUBLIC_USE_MOCK_API=false

2. Konfigurálja az API alap URL-címét:

NUXT_PUBLIC_API_BASE_URL=https://your-api-server.com

3. Győződjön meg arról, hogy a háttérválasza megfelel a következőben meghatározott típusoknak:

types/index.ts

Nincs szükség további kódmódosításokra.

A blog testreszabása

A fejlesztők könnyen testreszabhatják a sablont.

Téma vagy stílusok módosítása

A Tailwind konfigurációjának szerkesztése:

tailwind.config.ts

A globális stílusok itt találhatók:

assets/css/main.css

Blogtartalom módosítása

A próbatartalom frissíthető a következő helyeken:

mocks/posts.ts 
mocks/categories.ts 
mocks/authors.ts 

Ez lehetővé teszi a különböző blogadatkészletek gyors prototípus-készítését.

Alkalmazásbeállítások frissítése

Az alkalmazáskonstansok, mint például a navigáció, a márkaépítés és a közösségi linkek, a következő helyen tárolódnak:

utils/constants.ts

Miért érdemes ezt a Nuxt blogsablont használni?

Ez a projekt nagyszerű választás a fejlesztők számára, mert a következőket kínálja:

• Tiszta Nuxt 3 architektúra

• Éles szintű kódstruktúra

• Mock API frontend fejlesztéshez

• Modern felhasználói felület Tailwind CSS-sel

• SEO-kész oldalak

• Könnyű integráció valódi API-kkal

Tanulási projektként és gyártásra kész blogalapként is működik .

GitHub adattár

A teljes forráskódot itt böngészheted: 👉 https://github.com/bfotool/nuxtjs-base-blog

Ha hasznosnak találod a projektet, érdemes lehet megfontolni a repository csillaggal való megjelölését és a fejlesztések elvégzését.