close

Kiolezo cha Blogu ya Msingi wa Nuxt 3 – Bfotool Blogu ya Msingi wa Nuxtjs(Vue 3 + TypeScript + Tailwind)

Ikiwa unatafuta kiolezo cha kisasa cha kuanzisha blogu ya Nuxt 3, Blogu ya Msingi ya Bfotool Nuxtjs ni suluhisho bora. Ni programu ya blogu inayofanya kazi kikamilifu iliyojengwa kwa Nuxt 3, Vue 3, TypeScript, na Tailwind CSS, iliyoundwa ili kuwasaidia watengenezaji wa blogu kujenga blogu ya kitaalamu haraka bila kuhitaji sehemu ya nyuma wakati wa uundaji.

Mradi huu unajumuisha safu bandia ya API inayoendeshwa na vizuizi vya Axios, ambayo huiga API halisi ya REST. Hii inaifanya iwe kamili kwa ajili ya kujifunza usanifu wa Nuxt, programu za prototyping, au kujenga majukwaa ya blogu yaliyo tayari kwa uzalishaji.

Unaweza kuchunguza hazina hapa: 👉 https://github.com/bfotool/nuxtjs-base-blog

Blogu ya Msingi ya Bfotool Nuxtjs ni nini?

Blogu ya Msingi ya Bfotool Nuxtjs ni kiolezo cha kisasa cha programu ya blogu kilichojengwa kwa kutumia teknolojia za kisasa za mbele. Inatoa kiolesura kamili cha kublogi chenye machapisho, kategoria, utendaji kazi wa utafutaji, na kurasa za mawasiliano.

Mradi huu umeundwa kwa usanifu safi wa Nuxt 3, na kuufanya uwe rahisi kuelewa na kupanua.

Mambo muhimu muhimu ni pamoja na:

  • Kiolesura kamili cha blogu chenye muundo unaoitikia

  • API ya REST ya mock kwa ajili ya uundaji bila sehemu ya nyuma

  • Imejengwa kwa kutumia API ya kisasa ya Vue 3 Composition

  • Uundaji salama wa aina kwa kutumia TypeScript

  • Usanidi wa meta ulio tayari kwa SEO

  • Usaidizi wa mandhari nyeusi na nyepesi

Hifadhi inaweza kupatikana hapa:

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

Kiolezo hiki kinafaa kwa:

  • Blogu za kibinafsi

  • Blogu za kampuni

  • Kwingineko za wasanidi programu

  • Kujifunza usanifu wa Nuxt 3

  • Uundaji wa haraka wa tovuti za maudhui

Vipengele Muhimu

Kurasa kamili za Blogu za C class="ac-h3"

Kiolezo hiki kinajumuisha seti kamili ya kurasa zinazotumika kwa kawaida katika jukwaa la blogu.

Kurasa kuu zinajumuisha:

  • Ukurasa wa Nyumbani- Huonyesha chapisho la shujaa lililoangaziwa, vichujio vya kategoria, na machapisho yaliyoorodheshwa kwenye kurasa

  • Ukurasa wa Machapisho ya Blogu- Mwonekano kamili wa makala yenye jedwali la yaliyomo na machapisho yanayohusiana

  • Ukurasa wa Kategoria- Vinjari machapisho yaliyochujwa kwa kategoria

  • Ukurasa wa Utafutaji- Utafutaji wa wakati halisi wenye utendaji wa kukataa

  • Kuhusu Ukurasa- Tambulisha timu yako, dhamira, au chapa yako

  • Ukurasa wa Mawasiliano- Fomu ya mawasiliano yenye uthibitisho na maoni ya toast

  • Ukurasa wa Hitilafu- Kiolesura cha kushughulikia hitilafu maalum

Muundo huu hutoa uzoefu wa blogu ulio tayari kutumika kwa watumiaji.

< class="ac-h3"h3>Safu Bandia ya API kwa ajili ya Uundaji

Mojawapo ya vipengele vyenye nguvu zaidi vya mradi huu ni mfumo wa API ya majaribio .

Badala ya kuunganisha kwenye sehemu halisi ya nyuma, mradi huiga majibu ya API kwa kutumia vizuizi vya Axios .

Mbinu hii inaruhusu watengenezaji:

  • Jenga vipengele vya sehemu ya mbele bila utegemezi wa sehemu ya nyuma

  • Jaribu uchujaji, uchujaji, na upangaji

  • Iga ucheleweshaji halisi wa majibu ya API

  • Badili kwa urahisi hadi sehemu halisi ya nyuma baadaye

API ya majaribio inajumuisha sehemu za mwisho kama vile:

  • /posts

  • /posts/featured

  • /posts/:slug

  • /categories

  • /authors

  • /contact

Kwa sababu API imechukuliwa kupitia useApi composable, kubadili hadi sehemu halisi ya nyuma kunahitaji usanidi mdogo.

Usanifu wa Kisasa wa Nuxt 3

Mradi huu unafuata mifumo ya uundaji ya Nuxt 3 iliyopendekezwa, na kuifanya kuwa marejeleo mazuri kwa wasanidi programu wanaojifunza mfumo huo.

Vipengele muhimu vya usanifu ni pamoja na:

  • Vipengele na vifaa vinavyoweza kutengenezwa kiotomatiki

  • Uundaji wa TypeScript-first

  • Safu ya huduma ya API inayoweza kutengenezwa

  • Muundo wa folda ya moduli

  • Usanidi wa meta wa SEO

  • Mabadiliko ya ukurasa

Programu pia hutumia:

  • useSeoMeta()kwa lebo za SEO

  • useColorMode()kwa ajili ya kubadilisha mandhari

  • useRoute()na vifaa vingine vya Nuxt vilivyojengewa ndani

< class="ac-h3"h3>Hali Nyeusi na Ubunifu Msikivu

Kiolesura cha mtumiaji kinaunga mkono mandhari meusi na mepesi kwa kutumia @nuxtjs/color-mode.

Vipengele ni pamoja na:

  • Ugunduzi wa mandhari ya mfumo kiotomatiki

  • Kubadilisha mandhari kwa mikono

  • Uundaji wa CSS ya Tailwind

  • Mpangilio unaoitikia simu kwanza

Hii inahakikisha blogu inafanya kazi vizuri katika maeneo yote:

  • Eneo-kazi

  • Vidonge

  • Vifaa vya mkononi

Vipengele vya Blogu vya P class="ac-h3"weightful

Kiolezo cha blogu kinajumuisha vipengele kadhaa vya hali ya juu ambavyo kwa kawaida hupatikana katika mifumo ya blogu za uzalishaji.

Hizi ni pamoja na:

  • Jedwali la yaliyomo yaliyotokana na vichwa vya alama

  • Mapendekezo ya machapisho yanayohusiana

  • Muda unaokadiriwa wa kusoma

  • Kuchuja kategoria

  • Utafutaji wa maandishi kamili uliokataliwa

  • Upaji wa kurasa mahiri

  • Arifa za mkate

  • Vipengele vya kupakia mifupa

  • Mabadiliko ya ukurasa uliohuishwa

Vipengele hivi huunda uzoefu wa kisasa wa kusoma kwa wageni wa blogu.

Mrundiko wa Teknolojia

Mradi huu umejengwa kwa kutumia mrundiko wa kisasa wa sehemu ya mbele.

Safu Teknolojia
Mfumo Nuxt 3.15
Maktaba ya UI Vue 3.5
Lugha Hati ya Aina 5.7
Urembo Tailwind CSS 3.4
Usimamizi wa Jimbo Pinia
Mteja wa HTTP Axios
Aikoni Weka aikoni kupitia @nuxt/aikoni
Mandhari @nuxtjs/hali ya rangi
Kuweka kitambaa ESLint
Uumbizaji Mrembo zaidi

Mrundiko huu hutoa utendaji, uwezo wa kupanuka, na uwezo wa kudumisha .

Muhtasari wa Muundo wa Mradi

Hifadhi hufuata muundo safi na uliopangwa.

Saraka muhimu ni pamoja na:

Kurasa

Saraka pagesinafafanua njia kuu:

  • index.vue- Ukurasa wa Mwanzo

  • about.vue- Ukurasa wa Kuhusu

  • contact.vue- Fomu ya mawasiliano

  • search.vue- Kiolesura cha utafutaji

  • blog/[slug].vue- Ukurasa wa machapisho ya blogu

  • blog/category/[slug].vue- Ukurasa wa kategoria

Com class="ac-h3"ponenti

Vipengele vya UI vinavyoweza kutumika tena vimegawanywa katika makundi ya kimantiki:

  • layout- Kichwa na kijachini

  • common- Upagani, vipakiaji vya mifupa, arifa za mkate

  • blog- Vipengele mahususi vya blogu kama vile kadi za posta na orodha ya yaliyomo

Comp class="ac-h3"osables

Saraka ya composables ina mantiki inayoweza kutumika tena.

Viungo muhimu ni pamoja na:

  • useApi()- Safu ya huduma ya API iliyoandikwa

  • useDebounce()- Kanusha thamani tendaji

< class="ac-h3"h3>Safu ya API ya Mock

Mfumo wa mock upo ndani ya mockssaraka.

Ina:

  • handlers.ts- Vizuia maombi vya API

  • posts.ts- Mfano wa machapisho ya blogu

  • authors.ts- Data ya mwandishi

  • categories.ts- Data ya kategoria

Muundo huu hurahisisha kurekebisha na kupanua mradi .

Jinsi ya Kusakinisha na Kuendesha Mradi

Fuata hatua hizi ili kuendesha mradi ndani ya eneo lako.

Prereq class="ac-h3"uisites

Unahitaji:

  • Node.js 18.17 au baadaye

  • npm, uzi, au pnpm

Clone Hifadhi

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

class="ac-h3"Utegemezi wa Usakinishaji

npm install

Anza Seva ya Usanidi

npm run dev

Kisha fungua kivinjari chako katika:

http://localhost:3000

Seva ya usanidi wa Nuxt itapakia upya kiotomatiki faili zitakapobadilika.

Kubadilisha kutoka API ya Mock hadi API Halisi

Mojawapo ya maamuzi bora ya usanifu katika mradi huu ni swichi rahisi ya API .

Ili kuunganisha sehemu halisi ya nyuma:

  1. Weka kigezo cha mazingira:

NUXT_PUBLIC_USE_MOCK_API=false

  1. Sanidi URL yako ya msingi ya API:

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

  1. Hakikisha jibu lako la nyuma linalingana na aina zilizoainishwa katika:

types/index.ts

Hakuna mabadiliko ya ziada ya msimbo yanayohitajika.

Kubinafsisha Blogu

Wasanidi programu wanaweza kubinafsisha templeti kwa urahisi.

Badilisha Mandhari au Mitindo

Hariri usanidi wa Tailwind:

tailwind.config.ts

Mitindo ya kimataifa iko katika:

assets/css/main.css

Rekebisha Maudhui ya Blogu

Maudhui ya majaribio yanaweza kusasishwa katika:

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

Hii hukuruhusu kufanya mifano ya haraka ya seti tofauti za data za blogu.

Sasisha Mipangilio ya Programu

Vigezo vya programu kama vile urambazaji, chapa, na viungo vya kijamii huhifadhiwa katika:

utils/constants.ts

Kwa Nini Utumie Kiolezo Hiki cha Blogu ya Nuxt?

Mradi huu ni chaguo bora kwa watengenezaji kwa sababu hutoa:

  • Usanifu safi wa Nuxt 3

  • Muundo wa msimbo wa kiwango cha uzalishaji

  • API ya majaribio kwa ajili ya uundaji wa sehemu ya mbele

  • Kiolesura cha Kisasa cha UI chenye Tailwind CSS

  • Kurasa zilizo tayari kwa SEO

  • Ujumuishaji rahisi na API halisi

Inafanya kazi kama mradi wa kujifunza na kama msingi wa blogu unaotayarisha uzalishaji .

Hifadhi ya GitHub

Unaweza kuchunguza msimbo kamili wa chanzo hapa: 👉 https://github.com/bfotool/nuxtjs-base-blog

Ukiona mradi huo ni muhimu, fikiria kuuweka kwenye hazina na kuchangia maboresho.