Predložak osnovnog bloga Nuxt 3 – Bfotool Nuxtjs osnovni blog(Vue 3 + TypeScript + Tailwind)

Ako tražite moderni Nuxt 3 predložak za blog, Bfotool Nuxtjs Base Blog je izvrsno rješenje. To je potpuno funkcionalna blog aplikacija izgrađena s Nuxt 3, Vue 3, TypeScript i Tailwind CSS-om, osmišljena kako bi pomogla programerima da brzo izgrade profesionalni blog bez potrebe za backendom tijekom razvoja.

Projekt uključuje lažni API sloj pokretan Axios presretačima, koji simulira pravi REST API. To ga čini savršenim za učenje Nuxt arhitekture, izradu prototipa aplikacija ili izgradnju blog platformi spremnih za produkciju.

Repozitorij možete istražiti ovdje: 👉 https://github.com/bfotool/nuxtjs-base-blog

Što je Bfotool Nuxtjs Base Blog?

Bfotool Nuxtjs Base Blog je moderni predložak blog aplikacije izgrađen korištenjem najnovijih frontend tehnologija. Pruža cjelovito sučelje za bloganje s objavama, kategorijama, funkcijom pretraživanja i stranicama za kontakt.

Projekt je dizajniran s čistom Nuxt 3 arhitekturom, što ga čini lakim za razumijevanje i proširivanje.

Ključni naglasci uključuju:

Potpuno korisničko sučelje bloga s responzivnim dizajnom
Lažni REST API za razvoj bez backenda
Izrađeno s modernim Vue 3 Composition API-jem
Razvoj siguran po tipu s TypeScriptom
Meta konfiguracija spremna za SEO
Podrška za tamne i svijetle teme

Repozitorij se može pronaći ovdje:

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

Ovaj predložak je idealan za:

Osobni blogovi
Blogovi tvrtke
Portfelji razvojnih programera
Učenje Nuxt 3 arhitekture
Brza izrada prototipa web stranica sa sadržajem

Ključne značajke

C class="ac-h3"potpune stranice bloga

Predložak uključuje potpuno implementiran skup stranica koje su obično potrebne na blog platformi.

Glavne stranice uključuju:

Početna stranica – Prikazuje istaknutu objavu, filtere kategorija i paginirane objave
Stranica objava na blogu – Prikaz cijelog članka sa sadržajem i povezanim objavama
Stranica kategorija – Pregledajte objave filtrirane po kategoriji
Stranica za pretraživanje – Pretraživanje u stvarnom vremenu s funkcijom uklanjanja odskoka
Stranica O nama – Predstavite svoj tim, misiju ili brend
Kontaktna stranica – Kontaktni obrazac s validacijom i povratnim informacijama
Stranica s pogreškom – prilagođeno korisničko sučelje za rukovanje pogreškama

Ova struktura pruža korisnicima iskustvo bloga spremno za korištenje .

< class="ac-h3"h3>Lažni API sloj za razvoj

Jedna od najmoćnijih značajki ovog projekta je lažni API sustav .

Umjesto povezivanja sa stvarnim backendom, projekt simulira API odgovore pomoću Axios presretača .

Ovaj pristup omogućuje programerima da:

Izgradite značajke frontenda bez ovisnosti backenda
Testiranje paginacije, filtriranja i sortiranja
Simulirajte stvarna kašnjenja odgovora API-ja
Lako prebacite na pravi backend kasnije

Simulirani API uključuje krajnje točke kao što su:

/posts
/posts/featured
/posts/:slug
/categories
/authors
/contact

Budući da je API apstrahiran putem useApi composable-a, prelazak na pravi backend zahtijeva minimalnu konfiguraciju.

Moderna Nuxt 3 arhitektura

Projekt slijedi preporučene Nuxt 3 razvojne obrasce, što ga čini izvrsnom referencom za programere koji uče o frameworku.

Važne arhitektonske značajke uključuju:

Automatski uvezene komponente i sastavni elementi
Razvoj prvenstveno zasnovan na TypeScriptu
Sloj usluge kompozibilnog API-ja
Modularna struktura mapa
SEO meta konfiguracija
Prijelazi stranica

Aplikacija također koristi:

useSeoMeta()za SEO oznake
useColorMode()za promjenu teme
useRoute()i ostale ugrađene Nuxt kompozitne elemente

< class="ac-h3"h3>Tamni način rada i responzivni dizajn

Korisničko sučelje podržava tamne i svijetle teme pomoću @nuxtjs/color-mode.

Značajke uključuju:

Automatsko otkrivanje teme sustava
Ručno prebacivanje teme
CSS stiliziranje za Tailwind
Responzivni izgled prilagođen mobilnim uređajima

To osigurava da blog besprijekorno funkcionira na:

Stolno računalo
Tablete
Mobilni uređaji

Značajke bloga P class="ac-h3"owerful

Predložak bloga uključuje nekoliko naprednih značajki koje se obično nalaze u produkcijskim platformama za bloganje.

To uključuje:

Sadržaj generiran iz Markdown naslova
Prijedlozi povezanih objava
Procijenjeno vrijeme čitanja
Filtriranje kategorija
Pretraživanje cijelog teksta bez odskoka
Pametno paginiranje
Obavijesti u tostu
Učitavanje komponenti kostura
Animirani prijelazi stranica

Ove značajke stvaraju moderno iskustvo čitanja za posjetitelje bloga.

Tehnološki stog

Projekt je izgrađen korištenjem modernog frontend stacka.

Sloj	Tehnologija
Okvir	Nuxt 3.15
Biblioteka korisničkog sučelja	Vue 3.5
Jezik	TypeScript 5.7
Stil	Tailwind CSS 3.4
Upravljanje državom	Pinija
HTTP klijent	Axios
Ikone	Ikonificiraj putem @nuxt/icon
Tema	@nuxtjs/način-boje
Linting	ESLint
Formatiranje	Ljepše

Ovaj stog pruža performanse, skalabilnost i održivost .

Pregled strukture projekta

Spremište slijedi čistu i organiziranu strukturu.

Važni direktoriji uključuju:

Stranice

Direktorij pagesdefinira glavne rute:

index.vue– Početna stranica
about.vue– Stranica O nama
contact.vue– Kontaktni obrazac
search.vue– Sučelje za pretraživanje
blog/[slug].vue– Stranica s objavama na blogu
blog/category/[slug].vue– Stranica kategorije

Komponente Com class="ac-h3"

Komponente korisničkog sučelja koje se mogu ponovno koristiti grupirane su u logičke kategorije:

layout– Zaglavlje i podnožje
common– Paginacija, skeletni učitavači, obavijesti o toastovima
blog– Komponente specifične za blog poput razglednica i sadržaja

Comp class="ac-h3"osables

Direktorij composables sadrži logiku za višekratnu upotrebu.

Važne kompozitne tvari uključuju:

useApi()– Sloj tipiziranog API servisa
useDebounce()– Debounce reaktivne vrijednosti

< class="ac-h3"h3>Sloj lažnog API-ja

Simulirani sustav se nalazi unutar mocksdirektorija.

Sadrži:

handlers.ts– Presretači API zahtjeva
posts.ts– Primjeri objava na blogu
authors.ts– Podaci o autoru
categories.ts– Podaci o kategoriji

Ova struktura omogućuje jednostavnu izmjenu i proširenje projekta .

Kako instalirati i pokrenuti projekt

Slijedite ove korake za lokalno pokretanje projekta.

Preduvjeti class="ac-h3"uisites

Trebate:

Node.js 18.17 ili noviji
npm, pređa ili pnpm

Kloniraj repozitorij

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

class="ac-h3"Instaliranje ovisnosti

npm install

Pokreni razvojni poslužitelj

npm run dev

Zatim otvorite preglednik na:

http://localhost:3000

Nuxt razvojni poslužitelj će se automatski ponovno učitati kada se datoteke promijene.

Prelazak s Mock API-ja na Real API

Jedna od najboljih dizajnerskih odluka u ovom projektu je jednostavna promjena API-ja .

Za povezivanje pravog backenda:

Postavite varijablu okruženja:

NUXT_PUBLIC_USE_MOCK_API=false

Konfigurirajte svoj osnovni API URL:

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

Provjerite odgovara li vaš backend odgovor tipovima definiranim u:

types/index.ts

Nisu potrebne dodatne promjene koda.

Prilagođavanje bloga

Programeri mogu jednostavno prilagoditi predložak.

Promjena teme ili stilova

Uredite konfiguraciju Tailwinda:

tailwind.config.ts

Globalni stilovi se nalaze u:

assets/css/main.css

Izmijenite sadržaj bloga

Probni sadržaj može se ažurirati u:

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

To vam omogućuje brzo prototipiranje različitih skupova podataka za blog.

Ažuriranje postavki aplikacije

Konstante aplikacije kao što su navigacija, brendiranje i društvene poveznice pohranjene su u:

utils/constants.ts

Zašto koristiti ovaj Nuxt predložak bloga?

Ovaj projekt je odličan izbor za developere jer pruža:

Čista Nuxt 3 arhitektura
Struktura koda na razini produkcije
Mock API za razvoj frontenda
Moderno korisničko sučelje s Tailwind CSS-om
Stranice spremne za SEO
Jednostavna integracija sa stvarnim API-jima

Funkcionira i kao projekt učenja i kao temelj bloga spreman za produkciju .

GitHub repozitorij

Cijeli izvorni kod možete istražiti ovdje: 👉 https://github.com/bfotool/nuxtjs-base-blog

Ako smatrate da je projekt koristan, razmislite o označavanju repozitorija zvjezdicom i doprinosu poboljšanjima.