close

Template ta' Blogg Bażiku Nuxt 3 – Bfotool Nuxtjs Base Blog(Vue 3 + TypeScript + Tailwind)

Jekk qed tfittex template modern ta' blog Nuxt 3, il- Bfotool Nuxtjs Base Blog hija soluzzjoni eċċellenti. Hija applikazzjoni ta' blog kompletament funzjonali mibnija b'Nuxt 3, Vue 3, TypeScript, u ​​Tailwind CSS, iddisinjata biex tgħin lill-iżviluppaturi jibnu malajr blog professjonali mingħajr ma jkollhom bżonn backend waqt l-iżvilupp.

Il-proġett jinkludi saff API falz imħaddem minn interċettaturi Axios, li jissimula API REST reali. Dan jagħmilha perfetta għat-tagħlim tal-arkitettura Nuxt, il-prototipazzjoni ta' applikazzjonijiet, jew il-bini ta' pjattaformi ta' blog lesti għall-produzzjoni.

Tista' tesplora r-repożitorju hawn: 👉 https://github.com/bfotool/nuxtjs-base-blog

X'inhu l-Blogg Bażiku ta' Bfotool Nuxtjs?

Bfotool Nuxtjs Base Blog huwa template modern ta' applikazzjoni għall-blog mibni bl-użu tal-aħħar teknoloġiji frontend. Jipprovdi interface kompluta għall-blogging b'postijiet, kategoriji, funzjonalità ta' tiftix, u paġni ta' kuntatt.

Il-proġett huwa ddisinjat b'arkitettura Nuxt 3 nadifa, li tagħmilha faċli biex jinftiehem u jiġi estiż.

Punti ewlenin jinkludu:

  • UI sħiħa tal-blogg b'disinn responsiv

  • API REST finta għall-iżvilupp mingħajr backend

  • Mibni bl-API moderna tal-Kompożizzjoni ta' Vue 3

  • Żvilupp sikur għat-tip b'TypeScript

  • Konfigurazzjoni meta lesta għall-SEO

  • Appoġġ għat-tema skura u ċara

Ir-repożitorju jista' jinstab hawn:

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

Dan il-mudell huwa ideali għal:

  • Blogs personali

  • Blogs tal-kumpaniji

  • Portafolli tal-iżviluppaturi

  • Tagħlim tal-arkitettura Nuxt 3

  • Prototipazzjoni rapida ta' websajts tal-kontenut

Karatteristiċi Ewlenin

C class="ac-h3"Paġni tal-Blog kompluti

It-template jinkludi sett ta' paġni implimentati bis-sħiħ li tipikament huma meħtieġa f'pjattaforma ta' blog.

Il-paġni ewlenin jinkludu:

  • Paġna Ewlenija – Turi post ewlieni, filtri tal-kategorija, u postijiet paġinati

  • Paġna tal-Post tal-Blog – Veduta sħiħa tal-artiklu bit-tabella tal-kontenut u postijiet relatati

  • Paġna tal-Kategorija – Fittex postijiet iffiltrati skont il-kategorija

  • Paġna tat-Tiftix – Tiftix f'ħin reali b'funzjonalità ta' debounce

  • Paġna Dwar – Introduċi t-tim, il-missjoni, jew il-marka tiegħek

  • Paġna ta' Kuntatt – Formola ta' kuntatt b'validazzjoni u feedback tat-toast

  • Paġna ta' Żball – UI tal-immaniġġjar tal-iżbalji personalizzata

Din l-istruttura tipprovdi esperjenza ta' blog lesta għall-użu għall-utenti.

<class="ac-h3"h3>Saff tal-API Falz għall-Iżvilupp

Waħda mill-aktar karatteristiċi qawwija ta' dan il-proġett hija s- sistema tal-API finta .

Minflok ma jikkonnettja ma' backend reali, il-proġett jissimula r-risposti tal-API bl-użu tal-interċetturi Axios .

Dan l-approċċ jippermetti lill-iżviluppaturi li:

  • Ibni karatteristiċi tal-frontend mingħajr dipendenzi tal-backend

  • Ittestja l-paġinazzjoni, il-filtrazzjoni, u l-issortjar

  • Simula dewmien reali fir-rispons tal-API

  • Ibdel faċilment għal backend reali aktar tard

L-API finta tinkludi endpoints bħal:

  • /posts

  • /posts/featured

  • /posts/:slug

  • /categories

  • /authors

  • /contact

Peress li l-API hija astratta permezz tal- useApi composable, il-qlib għal backend reali jeħtieġ konfigurazzjoni minima.

Arkitettura Nuxt 3 Moderna

Il-proġett isegwi l-mudelli ta' żvilupp rakkomandati ta' Nuxt 3, u dan jagħmilha referenza tajba għall-iżviluppaturi li qed jitgħallmu l-qafas.

Karatteristiċi arkitettoniċi importanti jinkludu:

  • Komponenti u kompożibbli importati awtomatikament

  • Żvilupp TypeScript-first

  • Saff tas-servizz tal-API kompożibbli

  • Struttura modulari tal-fowlder

  • Konfigurazzjoni tal-meta SEO

  • Tranżizzjonijiet tal-paġna

L-applikazzjoni tuża wkoll:

  • useSeoMeta()għal tikketti SEO

  • useColorMode()għall-bdil tat-tema

  • useRoute()u kompożibbli Nuxt oħra integrati

<class="ac-h3"h3>Modalità Skura u Disinn Responsiv

L-UI tappoġġja temi skuri u ċari bl- użu ta' @nuxtjs/color-mode.

Il-karatteristiċi jinkludu:

  • Sejbien awtomatiku tat-tema tas-sistema

  • Toggle manwali tat-tema

  • Stiljar tas-CSS Tailwind

  • Disinn li jwieġeb l-ewwel għall-mowbajl

Dan jiżgura li l-blog jaħdem bla xkiel f'dawn l-aspetti:

  • Desktop

  • Pilloli

  • Apparati mobbli

Karatteristiċi tal-Blog b'saħħtu tal-klassi P="ac-h3"

It-template tal-blog jinkludi diversi karatteristiċi avvanzati li tipikament jinstabu fi pjattaformi ta' blogs ta' produzzjoni.

Dawn jinkludu:

  • Tabella tal-kontenut iġġenerata minn intestaturi ta' markdown

  • Suġġerimenti ta' postijiet relatati

  • Ħin stmat tal-qari

  • Iffiltrar tal-kategoriji

  • Tiftix ta' test sħiħ imħassar

  • Paġinazzjoni intelliġenti

  • Notifiki tat-Toast

  • Tagħbija tal-komponenti tal-iskeletru

  • Tranżizzjonijiet animati tal-paġna

Dawn il-karatteristiċi joħolqu esperjenza moderna tal-qari għall-viżitaturi tal-blog.

Munzell tat-Teknoloġija

Il-proġett huwa mibni bl-użu ta' frontend stack modern.

Saff Teknoloġija
Qafas Nuxt 3.15
Librerija tal-UI Vista 3.5
Lingwa TypeScript 5.7
Stiljar CSS tar-riħ ta' wara 3.4
Ġestjoni tal-Istat Pinja
Klijent HTTP Axjos
Ikoni Ikonifika permezz ta' @nuxt/icon
Tema @nuxtjs/modalità-tal-kulur
Linting ESLint
Formattjar Isbaħ

Dan l-istack jipprovdi prestazzjoni, skalabbiltà, u manutenzjoni .

Ħarsa Ġenerali lejn l-Istruttura tal-Proġett

Ir-repożitorju jsegwi struttura nadifa u organizzata.

Direttorji importanti jinkludu:

Paġni

Id pages-direttorju jiddefinixxi r-rotot ewlenin:

  • index.vue– Paġna ewlenija

  • about.vue– Dwar il-paġna

  • contact.vue– Formola ta' kuntatt

  • search.vue– Interfaċċja tat-tiftix

  • blog/[slug].vue– Paġna tal-artiklu tal-blogg

  • blog/category/[slug].vue– Paġna tal-kategorija

Komponenti tal-klassi Com="ac-h3"

Il-komponenti tal-UI li jistgħu jerġgħu jintużaw huma miġbura f'kategoriji loġiċi:

  • layout– Intestatura u footer

  • common– Paġinazzjoni, skeleton loaders, notifiki tat-toast

  • blog– Komponenti speċifiċi għall-blog bħal kartolini u werrej

Klassi tal-kompożizzjoni="ac-h3"osables

Id-direttorju composables fih loġika li tista' terġa' tintuża.

Komponibbli importanti jinkludu:

  • useApi()– Saff tas-servizz tal-API ttajpjat

  • useDebounce()– Debounce valuri reattivi

<class="ac-h3"h3>Saff tal-API finta

Is-sistema finta tinsab ġewwa d- mocksdirettorju.

Fiha:

  • handlers.ts– Interċettaturi tat-talbiet tal-API

  • posts.ts– Kampjuni ta’ postijiet fuq il-blog

  • authors.ts– Dejta tal-awtur

  • categories.ts– Dejta tal-kategorija

Din l-istruttura tagħmilha faċli li l-proġett jiġi modifikat u estiż .

Kif Tinstalla u Tħaddem il-Proġett

Segwi dawn il-passi biex tmexxi l-proġett lokalment.

Prerekwiżit klassi="ac-h3"uisites

Għandek bżonn:

  • Node.js 18.17 jew aktar tard

  • npm, ħajta, jew pnpm

Ikklona r-Repożitorju

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

class="ac-h3"Installa Dipendenzi

npm install

Ibda s-Server tal-Iżvilupp

npm run dev

Imbagħad iftaħ il-browser tiegħek fuq:

http://localhost:3000

Is-server tal-iżvilupp Nuxt jerġa' jitgħabba awtomatikament meta l-fajls jinbidlu.

Tibdil minn Mock API għal Real API

Waħda mill-aqwa deċiżjonijiet ta' disinn f'dan il-proġett hija l- bdil faċli tal-API .

Biex tqabbad backend reali:

  1. Issettja l-varjabbli tal-ambjent:

NUXT_PUBLIC_USE_MOCK_API=false

  1. Ikkonfigura l-URL bażi tal-API tiegħek:

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

  1. Kun żgur li r-rispons tal-backend tiegħek jaqbel mat-tipi definiti f':

types/index.ts

M'hemmx bżonn ta' bidliet addizzjonali fil-kodiċi.

Il-Personalizzazzjoni tal-Blog

L-iżviluppaturi jistgħu faċilment jippersonalizzaw it-template.

Ibdel it-Tema jew l-Istili

Editja l-konfigurazzjoni Tailwind:

tailwind.config.ts

L-istili globali jinsabu fi:

assets/css/main.css

Immodifika l-Kontenut tal-Blog

Il-kontenut finta jista' jiġi aġġornat fi:

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

Dan jippermettilek li tagħmel prototipi malajr ta' settijiet ta' dejta ta' blogs differenti.

Aġġorna s-Settings tal-App

Il-kostanti tal-applikazzjoni bħan-navigazzjoni, il-branding, u l-links soċjali huma maħżuna f':

utils/constants.ts

Għaliex Għandek Tuża Dan il-Mudell ta' Blogg Nuxt?

Dan il-proġett huwa għażla tajba għall-iżviluppaturi għax jipprovdi:

  • Arkitettura nadifa ta' Nuxt 3

  • Struttura tal-kodiċi fil-livell tal-produzzjoni

  • API finta għall-iżvilupp tal-frontend

  • UI moderna b'Tailwind CSS

  • Paġni lesti għall-SEO

  • Integrazzjoni faċli ma' APIs reali

Jaħdem kemm bħala proġett ta' tagħlim kif ukoll bħala pedament ta' blog lest għall-produzzjoni .

Repożitorju tal-GitHub

Tista' tesplora l-kodiċi tas-sors sħiħ hawn: 👉 https://github.com/bfotool/nuxtjs-base-blog

Jekk issib il-proġett utli, ikkunsidra li żżid star fir-repożitorju u tikkontribwixxi titjib.