close

Teimpléad Blag Bonn Nuxt 3 – Bfotool Blag Bonn Nuxtjs(Vue 3 + TypeScript + Tailwind)

Más teimpléad tosaithe blag nua-aimseartha Nuxt 3 atá uait, is réiteach den scoth é Bfotool Nuxtjs Base Blog. Is feidhmchlár blag lánfheidhmiúil é atá tógtha le Nuxt 3, Vue 3, TypeScript, agus Tailwind CSS, atá deartha chun cabhrú le forbróirí blag gairmiúil a thógáil go tapa gan gá le cúltaca le linn na forbartha.

Áirítear leis an tionscadal ciseal API bréige faoi thiomáint ag idircheapóirí Axios, a insamhlaíonn fíor-API REST. Fágann sé seo go bhfuil sé foirfe chun ailtireacht Nuxt a fhoghlaim, feidhmchláir fréamhshamhlacha a dhéanamh, nó ardáin bhlag atá réidh le haghaidh táirgeachta a thógáil.

Is féidir leat an stór a iniúchadh anseo: 👉 https://github.com/bfotool/nuxtjs-base-blog

Cad é Blag Bonn Bfotool Nuxtjs?

Is teimpléad feidhmchláir bhlag nua-aimseartha é Bfotool Nuxtjs Base Blog atá tógtha ag baint úsáide as na teicneolaíochtaí tosaigh is déanaí. Soláthraíonn sé comhéadan blagála iomlán le poist, catagóirí, feidhmiúlacht chuardaigh, agus leathanaigh teagmhála.

Tá an tionscadal deartha le hailtireacht ghlan Nuxt 3, rud a fhágann go bhfuil sé éasca le tuiscint agus le leathnú.

Áirítear na príomhghnéithe seo a leanas:

  • Comhéadan úsáideora iomlán blag le dearadh sofhreagrach

  • API REST bréige le haghaidh forbartha gan chúltaca

  • Tógtha le API nua-aimseartha Vue 3 Composition

  • Forbairt shábháilte ó thaobh cineáil de le TypeScript

  • Cumraíocht meitea atá réidh le haghaidh Sinsearach

  • Tacaíocht do théamaí dorcha agus geala

Is féidir an stórlann a fháil anseo:

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

Tá an teimpléad seo oiriúnach do:

  • Blaganna pearsanta

  • Blagáin na cuideachta

  • Punanna forbróirí

  • Ag foghlaim ailtireacht Nuxt 3

  • Fréamhshamhaltú tapa suíomhanna gréasáin ábhair

Príomhghnéithe

C class="ac-h3" Leathanaigh Bhlag iomlána

Cuimsíonn an teimpléad sraith leathanach atá curtha i bhfeidhm go hiomlán a bhíonn riachtanach de ghnáth in ardán blaganna.

Áirítear na leathanaigh seo a leanas ar na príomhleathanaigh:

  • Leathanach Baile – Taispeánann sé post laochra le feiceáil, scagairí catagóire, agus poist leathanaigh

  • Leathanach Post Blag – Radharc iomlán ar an alt le clár ábhair agus poist ghaolmhara

  • Leathanach Catagóire – Brabhsáil poist scagtha de réir catagóire

  • Leathanach Cuardaigh – Cuardach fíor-ama le feidhmiúlacht dí-bhréagtha

  • Maidir Linn Leathanach – Cuir do fhoireann, do mhisean nó do bhranda in aithne

  • Leathanach Teagmhála – Foirm teagmhála le bailíochtú agus aiseolas tósta

  • Leathanach Earráide – Chomhéadan úsáideora saincheaptha chun earráidí a láimhseáil

Cuireann an struchtúr seo eispéireas blagála réidh le húsáid ar fáil d’úsáideoirí.

<class="ac-h3"h3>Sraith API Bréige le haghaidh Forbartha

Ceann de na gnéithe is cumhachtaí den tionscadal seo ná an córas API bréige .

In ionad ceangal le fíor-chúltaca, insamhlaíonn an tionscadal freagraí API ag baint úsáide as idircheapóirí Axios .

Leis an gcur chuige seo, is féidir le forbróirí:

  • Tóg gnéithe tosaigh gan spleáchais chúltaca

  • Tástáil leathanaigh, scagacháin agus sórtála

  • Insamhladh moilleanna freagartha API fíor

  • Athraigh go héasca chuig cúltaca fíor níos déanaí

Áirítear leis an API bréige críochphointí ar nós:

  • /posts

  • /posts/featured

  • /posts/:slug

  • /categories

  • /authors

  • /contact

Ós rud é go ndéantar an API a achoimriú tríd an useApi composable, níl mórán cumraíochta ag teastáil chun aistriú go cúltaca fíor.

Ailtireacht Nua-Aimseartha Nuxt 3

Leanann an tionscadal patrúin forbartha molta Nuxt 3, rud a fhágann gur tagairt iontach é d’fhorbróirí atá ag foghlaim an chreata.

Áirítear leis na gnéithe ailtireachta tábhachtacha seo a leanas:

  • Comhpháirteanna agus comhdhéanamh a allmhairítear go huathoibríoch

  • Forbairt ar dtús ar TypeScript

  • Ciseal seirbhíse API inchumtha

  • Struchtúr fillteán modúlach

  • Cumraíocht meitea Sinsearach

  • Aistrithe leathanaigh

Úsáideann an feidhmchlár freisin:

  • useSeoMeta()le haghaidh clibeanna Sinsearach

  • useColorMode()le haghaidh athrú téama

  • useRoute()agus comhdhéanamh Nuxt ionsuite eile

Mód Dorcha agus Dearadh Freagrach

Tacaíonn an comhéadan úsáideora le téamaí dorcha agus geala ag baint úsáide as @nuxtjs/color-mode.

Áirítear leis na gnéithe seo a leanas:

  • Brath uathoibríoch téamaí córais

  • Athrú téama láimhe

  • Stíl CSS Tailwind

  • Leagan amach sofhreagrach soghluaiste-ar-dtús

Cinntíonn sé seo go n-oibríonn an blag go réidh ar fud:

  • Deasc

  • Táibléid

  • Gléasanna soghluaiste

Gnéithe Blag Cumhachtacha P class="ac-h3"

Tá roinnt gnéithe ardleibhéil sa teimpléad blag a fhaightear de ghnáth in ardáin bhlag léiriúcháin.

Áirítear leis seo:

  • Clár ábhair a ghintear ó cheannteidil lascaine

  • Moltaí poist ghaolmhara

  • Am léitheoireachta measta

  • Scagadh catagóire

  • Cuardach téacs iomlán díbhriste

  • Leathanachú cliste

  • Fógraí tósta

  • Comhpháirteanna cnámharlaigh á lódáil

  • Aistrithe leathanaigh beoite

Cruthaíonn na gnéithe seo eispéireas léitheoireachta nua-aimseartha do chuairteoirí blaganna.

Cruach Teicneolaíochta

Tá an tionscadal tógtha ag baint úsáide as stac tosaigh nua-aimseartha.

Sraith Teicneolaíocht
Creat Nuxt 3.15
Leabharlann Chomhéadain Vue 3.5
Teanga Clóscríobh 5.7
Stíliú Tailwind CSS 3.4
Bainistíocht Stáit Pinia
Cliant HTTP Axios
Deilbhíní Deilbhínigh trí @nuxt/icon
Téama @nuxtjs/mód-dathanna
Línteáil ESLint
Formáidiú Níos deise

Soláthraíonn an stac seo feidhmíocht, inscálaitheacht agus inchothabháil .

Forbhreathnú ar Struchtúr an Tionscadail

Leanann an stór struchtúr glan agus eagraithe.

I measc na n-eolairí tábhachtacha tá:

Leathanaigh

Sainmhíníonn an pagest-eolaire na príomhbhealaí:

  • index.vue– Leathanach baile

  • about.vue– Leathanach Maidir Linn

  • contact.vue– Foirm teagmhála

  • search.vue– Comhéadan cuardaigh

  • blog/[slug].vue– Leathanach postála blag

  • blog/category/[slug].vue– Leathanach catagóire

Comhpháirteanna class="ac-h3"

Déantar comhpháirteanna UI in-athúsáidte a ghrúpáil i gcatagóirí loighciúla:

  • layout– Ceanntásc agus buntásc

  • common– Leathanachú, luchtóirí cnámharlaigh, fógraí tósta

  • blog– Comhpháirteanna sonracha don bhlag cosúil le cártaí poist agus clár ábhair

Comp class="ac-h3"osables

Tá loighic in-athúsáidte san eolaire composables.

I measc na gcomhdhúile tábhachtacha tá:

  • useApi()– Ciseal seirbhíse API clóscríofa

  • useDebounce()– Luachanna imoibríocha a dhíspreagadh

Sraith API Bréige

Tá an córas bréige suite taobh istigh den mockseolaire.

Tá ann:

  • handlers.ts– Idircheapóirí iarratais API

  • posts.ts– Samplaí de phoist bhlag

  • authors.ts– Sonraí an údair

  • categories.ts– Sonraí catagóire

A bhuí leis an struchtúr seo, is furasta an tionscadal a mhodhnú agus a leathnú .

Conas an Tionscadal a Shuiteáil agus a Rith

Lean na céimeanna seo chun an tionscadal a rith go háitiúil.

Réamhriachtanas rang="ac-h3"uaiteanna

Ní mór duit:

  • Node.js 18.17 nó níos déanaí

  • npm, snáth, nó pnpm

Clónáil an Stór

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

class="ac-h3"Spleáchais Suiteála

npm install

Tosaigh Freastalaí Forbartha

npm run dev

Ansin oscail do bhrabhsálaí ag:

http://localhost:3000

Athlódálfar freastalaí forbartha Nuxt go huathoibríoch nuair a athraíonn comhaid.

Ag aistriú ó API Bréige go API Fíor

Ceann de na cinntí dearaidh is fearr sa tionscadal seo ná an lasc API éasca .

Chun cúltaca fíor a nascadh:

  1. Socraigh an athróg timpeallachta:

NUXT_PUBLIC_USE_MOCK_API=false

  1. Cumraigh d’URL bonn API:

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

  1. Cinntigh go bhfuil do fhreagra cúil ag teacht leis na cineálacha atá sainmhínithe i:

types/index.ts

Níl aon athruithe breise ar chód ag teastáil.

Ag Saincheapadh an Bhlag

Is féidir le forbróirí an teimpléad a shaincheapadh go héasca.

Athraigh Téama nó Stíleanna

Cuir cumraíocht Tailwind in eagar:

tailwind.config.ts

Tá stíleanna domhanda suite i:

assets/css/main.css

Modhnaigh Ábhar an Bhlag

Is féidir ábhar bréige a nuashonrú i:

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

Ligeann sé seo duit fréamhshamhlacha a dhéanamh go tapa ar shraitheanna sonraí blag éagsúla.

Nuashonraigh Socruithe na hAipe

Stóráiltear tairiseacha feidhmchláir amhail loingseoireacht, brandáil, agus naisc shóisialta i:

utils/constants.ts

Cén fáth ar chóir duit an teimpléad blag Nuxt seo a úsáid?

Is rogha iontach é an tionscadal seo do fhorbróirí mar go soláthraíonn sé:

  • Ailtireacht Glan Nuxt 3

  • Struchtúr cód leibhéal táirgeachta

  • API bréige le haghaidh forbairt tosaigh

  • Comhéadan úsáideora nua-aimseartha le Tailwind CSS

  • Leathanaigh atá réidh le haghaidh Sinsearach

  • Comhtháthú éasca le fíor-APIanna

Oibríonn sé mar thionscadal foghlama agus mar bhunús blag atá réidh le haghaidh léiriúcháin araon .

Stór GitHub

Is féidir leat an cód foinse iomlán a iniúchadh anseo: 👉 https://github.com/bfotool/nuxtjs-base-blog

Má cheapann tú go bhfuil an tionscadal úsáideach, smaoinigh ar réalta a chur sa stór agus feabhsuithe a chur leis.