close

Osnovna predloga bloga Nuxt 3 – Bfotool Nuxtjs Base Blog(Vue 3 + TypeScript + Tailwind)

Če iščete moderno predlogo za začetek bloga Nuxt 3, je Bfotool Nuxtjs Base Blog odlična rešitev. Gre za popolnoma funkcionalno aplikacijo za blog, zgrajeno z Nuxt 3, Vue 3, TypeScript in Tailwind CSS, zasnovano tako, da razvijalcem pomaga hitro zgraditi profesionalni blog, ne da bi med razvojem potrebovali zaledni program.

Projekt vključuje lažno plast API-ja, ki jo poganjajo prestrezniki Axios in simulira pravi REST API. Zaradi tega je idealen za učenje arhitekture Nuxt, izdelavo prototipov aplikacij ali gradnjo produkcijsko pripravljenih blog platform.

Repozitorij si lahko ogledate tukaj: 👉 https://github.com/bfotool/nuxtjs-base-blog

Kaj je osnovni blog Bfotool Nuxtjs?

Bfotool Nuxtjs Base Blog je sodobna predloga za bloganje, zgrajena z najnovejšimi tehnologijami frontenda. Ponuja celovit vmesnik za bloganje z objavami, kategorijami, funkcijo iskanja in stranmi za stike.

Projekt je zasnovan s čisto arhitekturo Nuxt 3, zaradi česar ga je enostavno razumeti in razširiti.

Ključni poudarki vključujejo:

  • Celoten uporabniški vmesnik bloga z odzivnim dizajnom

  • Navidezni REST API za razvoj brez zaledja

  • Izdelano s sodobnim Vue 3 Composition API-jem

  • Razvoj, varen glede na tipe, s TypeScript

  • Meta konfiguracija, pripravljena za SEO

  • Podpora za temne in svetle teme

Repozitorij najdete tukaj:

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

Ta predloga je idealna za:

  • Osebni blogi

  • Blogi podjetja

  • Portfelji razvijalcev

  • Učenje arhitekture Nuxt 3

  • Hitro prototipiranje spletnih strani z vsebinami

Ključne lastnosti

C class="ac-h3"celotne strani bloga

Predloga vključuje popolnoma implementiran nabor strani, ki so običajno potrebne na platformi za bloganje.

Glavne strani vključujejo:

  • Domača stran – Prikaže predstavljeno objavo junaka, filtre kategorij in oštevilčene objave

  • Stran z objavami v spletnem dnevniku – pogled celotnega članka s kazalom vsebine in povezanimi objavami

  • Stran s kategorijami – Brskajte po objavah, filtriranih po kategorijah

  • Iskalna stran – Iskanje v realnem času s funkcijo odpravljanja odbojev

  • Stran O nas – Predstavite svojo ekipo, poslanstvo ali blagovno znamko

  • Kontaktna stran – Kontaktni obrazec s potrditvijo in povratnimi informacijami

  • Stran z napakami – uporabniški vmesnik za obravnavo napak po meri

Ta struktura uporabnikom zagotavlja izkušnjo bloga, ki je pripravljena za uporabo .

< class="ac-h3"h3>Ponarejena plast API za razvoj

Ena najmočnejših funkcij tega projekta je sistem lažnih API-jev .

Namesto povezave z resničnim zaledjem projekt simulira odzive API-ja z uporabo prestreznikov Axios .

Ta pristop omogoča razvijalcem, da:

  • Gradite funkcije frontenda brez odvisnosti od zalednega sistema

  • Preizkusite oštevilčenje strani, filtriranje in razvrščanje

  • Simulirajte resnične zamude odziva API-ja

  • Enostavno preklopite na pravi zaledni sistem pozneje

Navidezni API vključuje končne točke, kot so:

  • /posts

  • /posts/featured

  • /posts/:slug

  • /categories

  • /authors

  • /contact

Ker je API abstrahiran prek sestavljivega elementa useApi, je za prehod na pravi zaledni sistem potrebna minimalna konfiguracija.

Sodobna arhitektura Nuxt 3

Projekt sledi priporočenim razvojnim vzorcem Nuxt 3, zaradi česar je odlična referenca za razvijalce, ki se učijo ogrodja.

Pomembne arhitekturne značilnosti vključujejo:

  • Samodejno uvožene komponente in sestavljivi elementi

  • Razvoj s TypeScript-om

  • Sestavljiva storitev API

  • Modularna struktura map

  • SEO meta konfiguracija

  • Prehodi med stranmi

Aplikacija uporablja tudi:

  • useSeoMeta()za SEO oznake

  • useColorMode()za preklapljanje tem

  • useRoute()in druge vgrajene Nuxt sestavljive elemente

< class="ac-h3"h3>Temni način in odzivna zasnova

Uporabniški vmesnik podpira temne in svetle teme z uporabo @nuxtjs/color-mode.

Značilnosti vključujejo:

  • Samodejno zaznavanje sistemske teme

  • Ročno preklapljanje tem

  • Slog CSS-ja za Tailwind

  • Odziven dizajn, prilagojen mobilnim napravam

To zagotavlja, da blog nemoteno deluje v:

  • Namizni računalnik

  • Tablete

  • Mobilne naprave

Funkcije bloga P class="ac-h3"wolful

Predloga bloga vključuje več naprednih funkcij, ki jih običajno najdemo na produkcijskih platformah za bloge.

To vključuje:

  • Kazalo vsebine, ustvarjeno iz naslovov Markdown

  • Predlogi za povezane objave

  • Predvideni čas branja

  • Filtriranje kategorij

  • Iskanje po celotnem besedilu brez odboja

  • Pametno oštevilčenje strani

  • Obvestila o tostih

  • Nalaganje komponent skeleta

  • Animirani prehodi med stranmi

Te funkcije ustvarjajo sodobno bralno izkušnjo za obiskovalce bloga.

Tehnološki sklad

Projekt je zgrajen z uporabo sodobnega frontend stack-a.

Plast Tehnologija
Okvir Nuxt 3.15
Knjižnica uporabniškega vmesnika Vue 3.5
Jezik TypeScript 5.7
Stiliziranje Tailwind CSS 3.4
Upravljanje države Pinija
HTTP odjemalec Axios
Ikone Ikonifikacija prek @nuxt/icon
Tema @nuxtjs/barvni-način
Linting ESLint
Oblikovanje Lepša

Ta sklad zagotavlja zmogljivost, skalabilnost in vzdrževanje .

Pregled strukture projekta

Repozitorij sledi čisti in organizirani strukturi.

Pomembni imeniki vključujejo:

Strani

Imenik pagesdoloča glavne poti:

  • index.vue– Domača stran

  • about.vue– Stran O nas

  • contact.vue– Kontaktni obrazec

  • search.vue– Iskalni vmesnik

  • blog/[slug].vue– Stran z objavami v spletnem dnevniku

  • blog/category/[slug].vue– Stran s kategorijami

Komponente Com class="ac-h3"

Komponente uporabniškega vmesnika za večkratno uporabo so združene v logične kategorije:

  • layout– Glava in noga

  • common– Oštevilčenje strani, skeletni nalagalniki, obvestila o toast vsebini

  • blog– Komponente, specifične za blog, kot so razglednice in kazalo vsebine

Razred Comp="ac-h3"osables

Imenik composables vsebuje logiko za večkratno uporabo.

Pomembni sestavni deli vključujejo:

  • useApi()– Sloj storitve tipiziranega API-ja

  • useDebounce()– Odboj reaktivnih vrednosti

< class="ac-h3"h3>Simulirana plast API-ja

Vzorčni sistem se nahaja znotraj mocksimenika.

Vsebuje:

  • handlers.ts– Prestrezniki zahtev API-ja

  • posts.ts– Vzorčne objave v spletnem dnevniku

  • authors.ts– Podatki o avtorju

  • categories.ts– Podatki o kategoriji

Zaradi te strukture je projekt enostavno spreminjati in razširjati .

Kako namestiti in zagnati projekt

Za lokalni zagon projekta sledite tem korakom.

Predpogoj class="ac-h3"uisites

Potrebujete:

  • Node.js 18.17 ali novejši

  • npm, preja ali pnpm

Kloniraj repozitorij

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

class="ac-h3"Namestitvene odvisnosti

npm install

Zaženi razvojni strežnik

npm run dev

Nato odprite brskalnik na naslovu:

http://localhost:3000

Razvojni strežnik Nuxt se bo samodejno znova naložil, ko se datoteke spremenijo.

Prehod z Mock API-ja na Real API

Ena najboljših oblikovalskih odločitev v tem projektu je enostavno preklapljanje API-ja .

Za povezavo pravega zalednega sistema:

  1. Nastavite spremenljivko okolja:

NUXT_PUBLIC_USE_MOCK_API=false

  1. Konfigurirajte osnovni URL API-ja:

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

  1. Zagotovite, da se vaš odziv zalednega sistema ujema s tipi, definiranimi v:

types/index.ts

Dodatne spremembe kode niso potrebne.

Prilagajanje bloga

Razvijalci lahko preprosto prilagodijo predlogo.

Spremeni temo ali sloge

Uredite konfiguracijo Tailwind:

tailwind.config.ts

Globalni slogi se nahajajo v:

assets/css/main.css

Spremeni vsebino bloga

Vsebino poskusov je mogoče posodobiti v:

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

To vam omogoča hitro izdelavo prototipov različnih naborov podatkov za bloge.

Posodobi nastavitve aplikacije

Konstante aplikacije, kot so navigacija, blagovna znamka in povezave do družbenih omrežij, so shranjene v:

utils/constants.ts

Zakaj uporabljati to predlogo bloga Nuxt?

Ta projekt je odlična izbira za razvijalce, saj ponuja:

  • Čista arhitektura Nuxt 3

  • Struktura kode na produkcijski ravni

  • Mock API za razvoj frontenda

  • Sodoben uporabniški vmesnik s Tailwind CSS

  • Strani, pripravljene za SEO

  • Enostavna integracija z resničnimi API-ji

Deluje tako kot učni projekt kot tudi kot produkcijsko pripravljena osnova za blog .

Repozitorij GitHub

Celotno izvorno kodo si lahko ogledate tukaj: 👉 https://github.com/bfotool/nuxtjs-base-blog

Če se vam zdi projekt uporaben, razmislite o označitvi repozitorija z zvezdico in prispevanju k izboljšavam.